多功能圖表之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
  });