使用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 --savebower install chart.js --save
- 1
- 2
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>
- 1
- 2
- 3
- 4
- 5
2. 创建图表
下面将以上面的人口表为例来创建条形图。Y轴表示人口数量，X轴表示国家。下面将创建一个id名为popChart的画布。
<canvas id="popChart" width="600" height="400"></canvas>
- 1
一般来说，画布的宽度和高度决定了图表的尺寸。在创建响应式图表时，宽高比由画布的宽度和高度决定。
接下来，你需要实例化Chart类。这可以通过传递要绘制图表的画布的节点，jQuery实例或2d上下文来完成。
var popCanvas = $("#popChart");var popCanvas = document.getElementById("popChart");var popCanvas = document.getElementById("popChart").getContext("2d");
- 1
- 2
- 3
接下来你需要做的就是把所有的参数传递给构造器。
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)' ] }] }});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
第二个参数传递的对象包含了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不适用于工具提示标题或页脚。
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow