[指南] Chart.js 前端图表实用工具

章节连结

Chart.js 是个轻量且具备多样化设定的 JavaScript Library,支援 8 种图表类型,也支援混合图表。在大数据的时代,资料视觉化变成一门显学且对使用者而言必备的工具。不过由于可以设定的地方很多,外加官方说明文件的 Demo 程式码缺乏客制化选项的示范,这边笔记一下自己摸索的结果。
chart.js logo


安装

提供多样化的安装方式,你可以使用 npm, bower, CDN……等方式。
详见:https://www.chartjs.org/docs/latest/getting-started/installation.html

基本使用

图表类型

分为折线图(Line)、长条图(Bar)、雷达图(Radar)、圆饼图(Pie)、极座标饼图(Polar Area)、泡泡图(Bubble)、散布图(Scatter)、面积图(Area),一共八类。
在 2.0 以后的版本中,你是可以使用混合图表的。


设定参数

各种图表类型皆适用

官方文件:https://www.chartjs.org/docs/latest/configuration/

由于细项实在太多,请自行根据需要官网查询参数,并在 options 的文件里面新增对应的 key ,将设定带入即可。以下为 options 的架构,不需要用到的 key 可以删除。

特定表格类型设定

Cartesian Axes (笛卡尔座标系)

常见的 X, Y 轴图表。采 X, Y 轴分开设置,每个轴线分为三个主要选项 – gridLines (格线), ticks (格间距), scaleLabel (轴标题)

Radial Axes

有四个主要选项 – gridLines (格线), angleLines (角度线), ticks (间距), pointLabels (图例点)

Demo


参考资料

1. Chart.js 官方网站
2. Chart.js 官方文件
3. [前端军火库]Chart.js – 轻松完成资料视觉化
4. [Javascript] Chart.js – Line Chart , Y 轴加入显示名称,加入货币的逗点符号
5. 简单使用Chart.js网页上画图表范例集-Javascript 图表、jQuery图表绘制


按赞加入粉丝团

延伸阅读