摘要: 图表、chartJS
转载自https://my.oschina.net/Nealyang/blog/540546
关于图表大家都知道,其中ChartJs就是其中一个非常简单实用的图表库,对于数据的展现都具有很好的封装性,而且外观的样式也具有很强大的可定制
手机上的截图这里就不上传了,太麻烦了
还有些别的图表的样式,这里我就不一一列举了,总之,对于一般的图表的样式,以及数据的展示,基本chartJs都能够满足
对于charJs的使用,也是非常的简单的
首先第一步,我们需要到官网去下载chartJS库,引入到我们的工程中
其次当然是开始创建图表,这里的创建图表也是非常的简单,与HighCharts创建图表的方式不同,chartJS是通过canvas绘画出来的,所以这里的动画效果要比HighCharts好一些
<canvas id="myChart" width="400" height="400"></canvas>
在JavaScript中
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
下面就是我们根据不同的需求绘制不同的图表了
比如这里我们绘制一个极地区域图
new Chart(ctx).PolarArea(data,options);
这些都说完,当然就该讨论讨论这个数据如何添加的问题了,chartJs可以绘画曲线图、柱状图、雷达图、极地区域图,饼图、环形图等一些图案,其实其数据的摆放都大同小异。
这里拿我们最常用的柱状图举例子吧
上代码
var data = {
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]
}
]
}
New对象:
new Chart(ctx).Bar(data,options);
其中fillColor就是填充的颜色,strokeColor是边框的颜色
Labels就是x轴上的字段,其中datasets就是给x轴上的位置填充数据的
其实chartJs如果没有什么特别的需求还是非常推荐使用的,简单实用,下面看下一个完整的代码:
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",//填充的颜色
strokeColor : "#dddddd",//边框的颜色
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
};
var ctx = document.getElementById("canvas0").getContext("2d");
new Chart(ctx).Bar(barChartData, {
responsive : true
});