html5 canvas作的圖表插件

時間 2019-11-29

原文原文鏈接

用highchart的時候發現它是用svg來畫圖的，那麼用canvas來作怎麼樣的。javascript

之前作AS圖表插件的時候，繪製圖畫主要用容器的Graphics對象來繪製，而canvas的context和Graphics同樣，均可以用來繪製圖形。css

而後就試着用canvas作了這樣一個東西。html

具體實現以下，我的表達能力有問題，各位看官仍是看源碼吧，以下：java

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LineChart</title>


</head>

<body>
<div id="lineChart" style="width: 900px;height: 600px;border: #c9302c"></div>
<script src="jquery-1.8.2.min.js"></script>
<script src="ChartTest1.js"></script>
<script type="text/javascript">
$("#lineChart").lineChart("init");
</script>
</body>
</html>

ChartTest1.js源碼以下：jquery

/**
 * Created by jackyWHJ on 14-2-26.
 */
(function($) {

    var canvas,context;
    var stepXArr=[],stepYArr=[],xStepWidth=0;
    var xAxisHeight = 0 ,yAxisWidth = 0;
    var heightVal = 0;//高度值對應數據比例

    /**
     * 畫X軸
     * */
    var drawXAxis = function (xAxisData) {
        context.beginPath();
        //畫X軸橫線
        context.moveTo(yAxisWidth - 6, canvas.height - xAxisHeight);
        context.lineTo(canvas.width-yAxisWidth,canvas.height - xAxisHeight);
        //畫刻度、加標籤
        var len = xAxisData.length;
        xStepWidth = (canvas.width-2*yAxisWidth)/len;
        for(var i = 0;i < len;i++){
            //畫刻度，默認刻度高度爲6個像素
            context.moveTo(yAxisWidth + (i+1)*xStepWidth, canvas.height - xAxisHeight);
            context.lineTo(yAxisWidth + (i+1)*xStepWidth,canvas.height - xAxisHeight + 6);
            //畫標籤，默認字體爲14個像素
            context.font = 'normal normal bold 14px 微軟雅黑';
           //字體居中在刻度中間
            context.fillText(xAxisData[i],
                yAxisWidth + (i+0.5)*xStepWidth - xAxisData[i].length*14/2,
                canvas.height - xAxisHeight + 24);
            //緩存刻度位置，用於畫網格
            stepXArr.push(yAxisWidth + (i+1)*xStepWidth);
        }

        context.stroke();
    }

    /**
     * 畫Y軸
     * */
    var drawYAxis = function(yMax,step) {
        context.beginPath();
        //畫X軸橫線
        context.moveTo(yAxisWidth, xAxisHeight);
        context.lineTo(yAxisWidth,canvas.height - xAxisHeight + 6);
        //畫刻度、加標籤
        var tickWidth = (canvas.height - 2*xAxisHeight )/step;
        heightVal = (canvas.height - 2*xAxisHeight )/yMax;
        for(var i = 0;i <= step;i++){
            //畫刻度，默認刻度高度爲6個像素
            context.moveTo(yAxisWidth, canvas.height - xAxisHeight - tickWidth * i);
            context.lineTo(yAxisWidth - 6,canvas.height - xAxisHeight - tickWidth * i);
            //畫標籤，默認字體爲14個像素
            context.font = 'normal normal 14px 微軟雅黑';
            //字體居中在刻度中間
            context.fillText(yMax/step * i,
                yAxisWidth -  50,
                canvas.height - xAxisHeight - tickWidth * i + 7);
            //緩存刻度位置，用於畫網格
            stepYArr.push(canvas.height - xAxisHeight - tickWidth * i);
        }
        context.stroke();
    }

    /**
     * 畫網格
     * */
    var drawGrid = function() {
        context.save();

        context.strokeStyle = "#6e6e6e";
        context.fillStyle = '#ffffff';
        context.lineWidth = 0.5;

        //畫橫線
        var j = 0,stepX = (canvas.width - 2*yAxisWidth)/10,stepY = (canvas.height - 2*xAxisHeight)/10;
        //10個像素位爲單位,6個像素畫線，4個像素空出來，成爲虛線
        for (var i = 0,len = stepYArr.length; i < len; i ++) {
            context.beginPath();
            for(j = 0;j < stepX;j++){
                context.moveTo(yAxisWidth + j*10, stepYArr[i]);
                context.lineTo(yAxisWidth + j*10 + 6,  stepYArr[i]);
            }
            context.stroke();
        }

        //畫豎線
        for (var i = 0,len = stepXArr.length; i < len; i ++) {
            context.beginPath();
            for(j = 0;j < stepY;j++){
                context.moveTo(stepXArr[i],xAxisHeight + j*10 );
                context.lineTo(stepXArr[i],xAxisHeight + j*10+6);
            }
            context.stroke();
        }
        context.restore();
    }

    /**
     * 畫線條
     * */
    var drawLine = function(lineData){
        //循環數據源畫線條
        context.beginPath();
        context.fillStyle = '#000000';
        context.lineWidth = 2;
        context.moveTo(stepXArr[0] - xStepWidth/2 ,canvas.height - xAxisHeight - lineData[0]*heightVal);
        for (var i = 1,len = lineData.length; i < len; i ++) {
            context.lineTo(stepXArr[i] - xStepWidth/2 ,canvas.height - xAxisHeight - lineData[i]*heightVal);
        }
        context.stroke();
        //畫圓點
        for (var i = 0,len = lineData.length; i < len; i ++) {
            context.beginPath();
            context.fillStyle = 'rgba(' + (Math.random()*255).toFixed(0) + ', ' +
                (Math.random()*255).toFixed(0) + ', ' +
                (Math.random()*255).toFixed(0) + ', 1.0)';
            context.arc(stepXArr[i] - xStepWidth/2 ,canvas.height - xAxisHeight - lineData[i]*heightVal,
                7, 0, Math.PI*2, true);
            context.fill();
        }
    }
    /**
     * 畫柱子
     * */
    var drawBar = function(barData,colorArr){
        var barWidth = xStepWidth/2;//定義柱子寬度
        //循環數據源畫矩形
        for (var i = 0,len = barData.length; i < len; i ++) {
            context.beginPath();
            context.fillStyle = colorArr[i];
            context.fillRect(stepXArr[i] - xStepWidth/2 - barWidth/2,canvas.height - xAxisHeight - barData[i]*heightVal,
                barWidth,barData[i]*heightVal);
            context.fill();
        }
    }

    var methods = {
        init: function(options) {

            // 在每一個元素上執行方法
            return this.each(function() {
                var $this = $(this);

                // 嘗試去獲取settings，若是不存在，則返回「undefined」
                var settings = $this.data("lineChart");

                // 若是獲取settings失敗，則根據options和default建立它
                if (typeof settings === "undefined") {

                    var defaults = {
                        width:850,
                        height:450,
                        xAxis:["蘋果","香蕉","梨","番茄","龍眼"],
                        lineData:[350,200,300,245,150],
                        barData:[350,134,120,51,90],
                        colorArr:['#ae303e','#913730','#D49797','0x538FD3','#A34e5d'],
                        onSomeEvent: function() {
                        }
                    };

                    settings = $.extend({}, defaults, options);

                    // 保存咱們新建立的settings
                    $this.data("lineChart", settings);
                } else {
                    //若是咱們獲取了settings，則將它和options進行合併（這不是必須的，你能夠選擇不這樣作）
                    settings = $.extend({}, settings, options);

                    // 若是你想每次都保存options，能夠添加下面代碼：
                    // $this.data("lineChart", settings);
                }
                canvas = document.createElement("canvas");
                canvas.width = settings.width;
                canvas.height = settings.height;
                canvas.style.cssText = 'margin:0 auto;';
                $this.append(canvas);
                context = canvas.getContext('2d');
                xAxisHeight = settings.height/8 ,yAxisWidth = settings.width/8;
                drawXAxis(settings.xAxis);
                drawYAxis(400,10);
                drawGrid();
                drawBar(settings.barData,settings.colorArr);
                drawLine(settings.lineData);
            });
        },
        destroy: function(options) {
            // 在每一個元素中執行代碼
            return $(this).each(function() {
                var $this = $(this);

                // 執行代碼

                // 刪除元素對應的數據
                $this.removeData("lineChart");
            });
        },
        val: function(options) {
            // 這裏的代碼經過.eq(0)來獲取選擇器中的第一個元素的，咱們或獲取它的HTML內容做爲咱們的返回值
            var someValue = this.eq(0).html();

            // 返回值
            return someValue;
        }
    };

    $.fn.lineChart = function() {
        var method = arguments[0];
        if (methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else if (typeof method === "object" || !method) {
            method = methods.init;
        } else {
            $.error("Method" + method + "does not exist on jQuery.pluginName");
            return this;
        }
        return method.apply(this, arguments);
    };
})(jQuery);