图表Chart.js入门教程

使用Chart.js来制作各种各样的图表。下面将为你全方位介绍chart.js。chart.js最与众不同之处是，它可以在HTML5 Canvas上面绘制出色的响应式图表。

Chart.js允许你把不同的图表类型混合在一起，然后在上面绘制日期、对数或自定义比例的数据。还可以在更改数据或更新颜色时应用运用框外动画。

下面将教你安装chart.js，然后介绍配置选项和其他的方面。

1. 安装和使用

你可以从GitHub里面下载最新版本的Chart.js或者在你的项目中使用CDN link。或者你也可以通过以下命令在npm或bower中来安装chart.js。

npm install chart.js --save
bower install chart.js --save

Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js，附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴，你需要在安装Chart.js之前安装上Moment.js。

而另一个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是两个版本只能安装一个，否则会引起错误。

一旦你决定好使用哪个版本之后，你就可以在你的项目中引入Chart.js了。

<script src="path/to/Chart.min.js">script>

<script>
 var barChart = new Chart({...})
script>

2. 创建图表

下面将以上面的人口表为例来创建条形图。Y轴表示人口数量，X轴表示国家。下面将创建一个id名为popChart的画布。

<canvas id="popChart" width="600" height="400">canvas>

一般来说，画布的宽度和高度决定了图表的尺寸。在创建响应式图表时，宽高比由画布的宽度和高度决定。

接下来，你需要实例化Chart类。这可以通过传递要绘制图表的画布的节点，jQuery实例或2d上下文来完成。

var popCanvas = $("#popChart");
var popCanvas = document.getElementById("popChart");
var popCanvas = document.getElementById("popChart").getContext("2d");

接下来你需要做的就是把所有的参数传递给构造器。

var barChart = new Chart(popCanvas, {
  type: 'bar',
  data: {
    labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
 datasets: [{
      label: 'Population',
      data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
 backgroundColor: [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)'
      ]
 }]
 }
});

第二个参数传递的对象包含了Chart.js创建图表的所有信息。type键指定图表类型，可以取下列值：line, bar, radar, polarArea, pie, doughnut 以及bubble。data键包含了要用到的所有数据。background键图表的背景色。默认值是’rgba(0,0,0,0.1)’。

每个图表都有自己的特定键，你可以用它们来控制图表的外观。这张图表是上面代码最终呈现效果。

3. 配置选项
Chart.js库允许你个性化定制你的图表。例如，你可以改变上面图表的颜色和边框宽度。你还可以通过更改字体大小和颜色来修改工具提示栏和图例。在这个小节里面你将会学习到这些设置样式的键。

Chart.js库具有四个特殊的全局键，可用于更改图表中的所有字体。这些键是 defaultFontFamily, defaultFontSize, defaultFontStyle，和 defaultFontColor。字体大小以像素为单位指定，不适用于 radialLinear刻度点标签。同样， defaultFontStyle不适用于工具提示标题或页脚。