Chart.js插件

時間 2019-11-11

原文原文鏈接

　　Chart.js是一個HTML5圖表庫，使用canvas元素來展現各式各樣的客戶端圖表，支持折線圖、柱形圖、雷達圖、餅圖、環形圖等。在每種圖表中，還包含了大量的自定義選項，包括動畫展現形式。 Chart.js比較輕量（gzip版本僅4.5k），且不依賴其餘庫。html

項目官網：http://www.chartjs.org/canvas

曲線圖（Line chart）

<!doctype html>
<html>
    <head>
        <title>Line Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>


    <script>

        var lineChartData = {
　　　　　　　// x軸的標示
            labels : ["January","February","March","April","May","June","July"],
　　　　　　　// 數據，數組中的每個object表明一條線
            datasets : [
                {
　　　　　　　　　　　　// 顏色的使用相似於CSS，你也能夠使用RGB、HEX或者HSL
　　　　　　　　　　　　// rgba顏色中最後一個值表明透明度
　　　　　　　　　　　　// 填充顏色
                    fillColor : "rgba(220,220,220,0.5)",
　　　　　　　　　　　　// 線的顏色
                    strokeColor : "rgba(220,220,220,1)",
　　　　　　　　　　　　// 點的填充顏色
                    pointColor : "rgba(220,220,220,1)",
　　　　　　　　　　　　// 點的邊線顏色
                    pointStrokeColor : "#fff",
　　　　　　　　　　　　// 與x軸標示對應的數據
                    data : [65,59,90,81,56,55,40]
                },
                {
                    fillColor : "rgba(151,187,205,0)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [28,48,40,19,96,27,100]
                }
            ]
            
        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
    
    </script>
    </body>
</html>

效果以下數組

圖表選項dom

    var options = {
        //Boolean - If we show the scale above the chart data    
        // 網格線是否在數據線的上面        
        scaleOverlay : false,
        
        //Boolean - If we want to override with a hard coded scale
        // 是否用硬編碼重寫y軸網格線
        scaleOverride : false,
        
        //** Required if scaleOverride is true **
        //Number - The number of steps in a hard coded scale
        // y軸刻度的個數
        scaleSteps : null,
        //Number - The value jump in the hard coded scale
        // y軸每一個刻度的寬度
        scaleStepWidth : null,
        //Number - The scale starting value
        // y軸的起始值
        scaleStartValue : null,

        //String - Colour of the scale line    
        // x軸y軸的顏色
        scaleLineColor : "rgba(0,0,0,1)",
        
        //Number - Pixel width of the scale line
        // x軸y軸的線寬    
        scaleLineWidth : 1,

        //Boolean - Whether to show labels on the scale    
        // 是否顯示y軸的標籤
        scaleShowLabels : true,
        
        //Interpolated JS string - can access value
        // 標籤顯示值
        scaleLabel : "<%=value%>",
        
        //String - Scale label font declaration for the scale label
        // 標籤的字體
        scaleFontFamily : "'Arial'",
        
        //Number - Scale label font size in pixels    
        // 標籤字體的大小
        scaleFontSize : 12,
        
        //String - Scale label font weight style
        // 標籤字體的樣式
        scaleFontStyle : "normal",
        
        //String - Scale label font colour    
        // 標籤字體的顏色
        scaleFontColor : "#666",    
        
        ///Boolean - Whether grid lines are shown across the chart
        // 是否顯示網格線
        scaleShowGridLines : true,
        
        //String - Colour of the grid lines
        // 網格線的顏色
        scaleGridLineColor : "rgba(0,0,0,.1)",
        
        //Number - Width of the grid lines
        // 網格線的線寬
        scaleGridLineWidth : 1,    
        
        //Boolean - Whether the line is curved between points
        // 是不是曲線
        bezierCurve : true,
        
        //Boolean - Whether to show a dot for each point
        // 是否顯示點
        pointDot : true,
        
        //Number - Radius of each point dot in pixels
        // 點的半徑
        pointDotRadius : 3,
        
        //Number - Pixel width of point dot stroke
        // 點的線寬
        pointDotStrokeWidth : 1,
        
        //Boolean - Whether to show a stroke for datasets
        datasetStroke : true,
        
        //Number - Pixel width of dataset stroke
        // 數據線的線寬
        datasetStrokeWidth : 3,
        
        //Boolean - Whether to fill the dataset with a colour
        // 數據線是否填充顏色
        datasetFill : true,
        
        //Boolean - Whether to animate the chart
        // 是否有動畫效果
        animation : true,

        //Number - Number of animation steps
        // 動畫的步數
        animationSteps : 60,
        
        //String - Animation easing effect
        // 動畫的效果
        animationEasing : "easeOutQuart",

        //Function - Fires when the animation is complete
        // 動畫完成後調用
        onAnimationComplete : null
    }

添加選項後，調用以下ide

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, options);

柱狀圖（Bar chart）

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>


    <script>

        var barChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : [65,59,90,81,56,55,40]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    data : [28,48,40,19,96,27,100]
                }
            ]
            
        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
    
    </script>
    </body>
</html>

效果以下post

圖表選項，內容基本如上，不一一註釋字體

Bar.defaults = {
                
    //Boolean - If we show the scale above the chart data            
    scaleOverlay : false,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The scale starting value
    scaleStartValue : null,

    //String - Colour of the scale line    
    scaleLineColor : "rgba(0,0,0,.1)",
    
    //Number - Pixel width of the scale line    
    scaleLineWidth : 1,

    //Boolean - Whether to show labels on the scale    
    scaleShowLabels : false,
    
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels    
    scaleFontSize : 12,
    
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    
    //String - Scale label font colour    
    scaleFontColor : "#666",    
    
    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,
    
    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",
    
    //Number - Width of the grid lines
    scaleGridLineWidth : 1,    

    //Boolean - If there is a stroke on each bar    
    barShowStroke : true,
    
    //Number - Pixel width of the bar stroke    
    barStrokeWidth : 2,
    
    //Number - Spacing between each of the X value sets
    // 柱狀塊與x值所造成的線（如：x=20這條線）之間的距離
    barValueSpacing : 5,
    
    //Number - Spacing between data sets within X values
    // 在同一x值內的柱狀塊之間的間距
    barDatasetSpacing : 1,
    
    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,
    
    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null
    
}

雷達圖或蛛網圖（Radar chart）

<!doctype html>
<html>
    <head>
        <title>Radar Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="450"></canvas>


    <script>

        var radarChartData = {
            labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : [65,59,90,81,56,55,40]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [28,48,40,19,96,27,100]
                }
            ]
            
        }

    var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});
    
    </script>
    </body>
</html>

效果以下動畫

圖表選項，內容基本如上，不一一註釋ui

Radar.defaults = {
                
    //Boolean - If we show the scale above the chart data            
    scaleOverlay : false,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The centre starting value
    scaleStartValue : null,
    
    //Boolean - Whether to show lines for each scale point
    scaleShowLine : true,

    //String - Colour of the scale line    
    scaleLineColor : "rgba(0,0,0,.1)",
    
    //Number - Pixel width of the scale line    
    scaleLineWidth : 1,

    //Boolean - Whether to show labels on the scale    
    scaleShowLabels : false,
    
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels    
    scaleFontSize : 12,
    
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    
    //String - Scale label font colour    
    scaleFontColor : "#666",
    
    //Boolean - Show a backdrop to the scale label
    scaleShowLabelBackdrop : true,
    
    //String - The colour of the label backdrop    
    scaleBackdropColor : "rgba(255,255,255,0.75)",
    
    //Number - The backdrop padding above & below the label in pixels
    scaleBackdropPaddingY : 2,
    
    //Number - The backdrop padding to the side of the label in pixels    
    scaleBackdropPaddingX : 2,
    
    //Boolean - Whether we show the angle lines out of the radar
    // 是否顯示角度線
    angleShowLineOut : true,
    
    //String - Colour of the angle line
    // 角度線的顏色
    angleLineColor : "rgba(0,0,0,.1)",
    
    //Number - Pixel width of the angle line
    // 角度線的線寬
    angleLineWidth : 1,            
    
    //String - Point label font declaration
    pointLabelFontFamily : "'Arial'",
    
    //String - Point label font weight
    pointLabelFontStyle : "normal",
    
    //Number - Point label font size in pixels    
    pointLabelFontSize : 12,
    
    //String - Point label font colour    
    pointLabelFontColor : "#666",
    
    //Boolean - Whether to show a dot for each point
    pointDot : true,
    
    //Number - Radius of each point dot in pixels
    pointDotRadius : 3,
    
    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,
    
    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,
    
    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,
    
    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,
    
    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,
    
    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null
    
}

極地區域圖（Polar area chart）

<!doctype html>
<html>
    <head>
        <title>Polar Area Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
        </style>
    </head>
    <body>
        <canvas id="canvas" height="400" width="400"></canvas>


    <script>
    var chartData = [
            {
                value : Math.random(),
                color: "#D97041"
            },
            {
                value : Math.random(),
                color: "#C7604C"
            },
            {
                value : Math.random(),
                color: "#21323D"
            },
            {
                value : Math.random(),
                color: "#9D9B7F"
            },
            {
                value : Math.random(),
                color: "#7D4F6D"
            },
            {
                value : Math.random(),
                color: "#584A5E"
            }
        ];
    var myPolarArea = new Chart(document.getElementById("canvas").getContext("2d")).PolarArea(chartData);
    </script>
    </body>
</html>

效果以下this

圖表選項

PolarArea.defaults = {
                
    //Boolean - Whether we show the scale above or below the chart segments
    scaleOverlay : true,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The centre starting value
    scaleStartValue : null,
    
    //Boolean - Show line for each value in the scale
    scaleShowLine : true,
    
    //String - The colour of the scale line
    scaleLineColor : "rgba(0,0,0,.1)",
    
    //Number - The width of the line - in pixels
    scaleLineWidth : 1,
    
    //Boolean - whether we should show text labels
    scaleShowLabels : true,
    
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels    
    scaleFontSize : 12,
    
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    
    //String - Scale label font colour    
    scaleFontColor : "#666",
    
    //Boolean - Show a backdrop to the scale label
    scaleShowLabelBackdrop : true,
    
    //String - The colour of the label backdrop    
    scaleBackdropColor : "rgba(255,255,255,0.75)",
    
    //Number - The backdrop padding above & below the label in pixels
    scaleBackdropPaddingY : 2,
    
    //Number - The backdrop padding to the side of the label in pixels    
    scaleBackdropPaddingX : 2,

    //Boolean - Stroke a line around each segment in the chart
    segmentShowStroke : true,
    
    //String - The colour of the stroke on each segement.
    segmentStrokeColor : "#fff",
    
    //Number - The width of the stroke value in pixels    
    segmentStrokeWidth : 2,
    
    //Boolean - Whether to animate the chart or not
    animation : true,
    
    //Number - Amount of animation steps
    animationSteps : 100,
    
    //String - Animation easing effect.
    animationEasing : "easeOutBounce",

    //Boolean - Whether to animate the rotation of the chart
    animateRotate : true,
    
    //Boolean - Whether to animate scaling the chart from the centre
    animateScale : false,

    //Function - This will fire when the animation of the chart is complete.
    onAnimationComplete : null
}

餅圖（Pie chart）

<!doctype html>
<html>
    <head>
        <title>Radar Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="450"></canvas>


    <script>

        var pieData = [
                {
                    value: 30,
                    color:"#F38630"
                },
                {
                    value : 50,
                    color : "#E0E4CC"
                },
                {
                    value : 100,
                    color : "#69D2E7"
                }
            
            ];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
    
    </script>
    </body>
</html>

效果以下

圖表選項

Pie.defaults = {
    //Boolean - Whether we should show a stroke on each segment
    // 塊和塊之間是否有間距
    segmentShowStroke : true,
    
    //String - The colour of each segment stroke
　　// 塊和塊之間間距的顏色
    segmentStrokeColor : "#fff",
    
    //Number - The width of each segment stroke
　　// 塊和塊之間間距的寬度
    segmentStrokeWidth : 2,
    
    //Boolean - Whether we should animate the chart    
    animation : true,
    
    //Number - Amount of animation steps
    animationSteps : 100,
    
    //String - Animation easing effect
    animationEasing : "easeOutBounce",
    
    //Boolean - Whether we animate the rotation of the Pie
　　// 是否有從0度到360度的動畫
    animateRotate : true,

    //Boolean - Whether we animate scaling the Pie from the centre
　　// 是否有從中心到邊緣的動畫
    animateScale : false,
    
    //Function - Will fire on animation completion.
    onAnimationComplete : null
}

環形圖（Doughnut chart）

<!doctype html>
<html>
    <head>
        <title>Doughnut Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="450"></canvas>


    <script>

        var doughnutData = [
                {
                    value: 30,
                    color:"#F7464A"
                },
                {
                    value : 50,
                    color : "#46BFBD"
                },
                {
                    value : 100,
                    color : "#FDB45C"
                },
                {
                    value : 40,
                    color : "#949FB1"
                },
                {
                    value : 120,
                    color : "#4D5360"
                }
            
            ];

    var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
    
    </script>
    </body>
</html>

效果以下

圖標選項

Doughnut.defaults = {
    //Boolean - Whether we should show a stroke on each segment
    segmentShowStroke : true,
    
    //String - The colour of each segment stroke
    segmentStrokeColor : "#fff",
    
    //Number - The width of each segment stroke
    segmentStrokeWidth : 2,
    
    //The percentage of the chart that we cut out of the middle.
    percentageInnerCutout : 50,
    
    //Boolean - Whether we should animate the chart    
    animation : true,
    
    //Number - Amount of animation steps
    animationSteps : 100,
    
    //String - Animation easing effect
    animationEasing : "easeOutBounce",
    
    //Boolean - Whether we animate the rotation of the Doughnut
    animateRotate : true,

    //Boolean - Whether we animate scaling the Doughnut from the centre
    animateScale : false,
    
    //Function - Will fire on animation completion.
    onAnimationComplete : null
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。