多功能图表之chartjs使用说明

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/Nealyang/blog/540546