从头开始学习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="width: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="width: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 };
初步学习到此结束。
