多功能图表之chartjs使用说明

关于图表你们都知道，其中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
  });