从头开始学习chart.js图表绘制工具

最近网站需要加入图标效果图,于是我就开始学习并实验如何使用chart.js这个插件.

简单介绍一下chart.js这个插件。chart是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。(http://www.bootcss.com/p/chart.js/)。

首选,我先引用chart.js

<script src="Chart.js"></script>

接下来,创建图表

为了创建图表,我们需要实例化一个Chart对象。为此,需要传入一个绘制图表的2d context。

html

<div style="400px;height:400px;">
  <canvas id="myChart" width="100%" height="100%"></canvas>
</div>

提示:这段代码是有点小问题的,因为是自己摸索的写的,下文有正确的

javascript(以曲线图为例)

<script>
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
//曲线图 Line chart
var myNewChart = new Chart(ctx).Line(data,options);
</script>

写到此时,测试了一下,发现好多错T_T

首选,<canvas id="myChart" width="100%" height="100%">,创建的图表区域不是预计的400*400,

其次,浏览器提示错误

然后开始查错:.........T..^..T...........

结果发现:

1.html 当options为{responsive: true}div设置的是图表的大小,canvas里的width与height只是宽高比而已,并且,已div的宽度为标准;100%只会让图表显示100px而已。(注:responsive: true,自适应)

2.script 里的(data,options)没有设置会引起的错误.

那么,再来重新写一次html吧

<div style="300px;">
    <canvas id="myChart" width="1" height="1"></canvas>
</div>

接下来script

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data,{responsive: true});

 然后添加数据[script](注:数据在之前);

以下数据为曲线图数据结构:(附参数说明)

var data = {
            labels : ["January","February","March","April","May","June","July"],//X轴 坐标
            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]//Y轴 坐标
                },
                {
                    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 Linedefaults = {
            //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 ** **如果scaleOverride是真的**
            //Number - The number of steps in a hard coded scale
            scaleSteps:null,
            //Number - THe value jump in the hard coded scale 数量,规模激增硬编码的值
            scaleStepWidth:20,
            //Number - The scale strrting valueY轴的起始值
            scaleStartValue:null,

            //String -Colour of the scale lineY/X轴的颜色
            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:false,

            //Interpolated JS string - can access value Y轴上的刻度,即文字
            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 - Whether the line is curved between points 是否使用贝塞尔曲线?即:线条是否弯曲
            bezierCurve:true,

            //Boolear - Whether to show a dot for eache point  是否显示点数
            pointDot:true,

            //Number - Radius of eache 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 withe 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
        };

初步学习到此结束。