官方文档对于各种图表的例子都是比较浅显的介绍, 对于一些参数缺少具体的例子这里主要以 Line Chart 为例对相关参数配置进行分析
1. 基础样式
这里统计一个学生的每个月月考成绩 (英语和数学), 通过曲线图进行展示
代码如下:
- <canvas id="myChart" width="400" height="400"></canvas>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
- // x-axis 数据 月数
- var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
- // y-axis 数据 成绩
- var english = [86, 78, 91, 84, 88, 90, 77, 70, 87, 97];
- var math = [97, 91, 95, 88, 81, 90, 78, 84, 90, 77];
- // 获取 canvas 作为绘图的上下文
- var ctx = document.getElementById('myChart').getContext('2d');
- // 生成对应的图表
- var myChart = new Chart(ctx, {
- type: 'line',
- data: {
- labels: month,
- datasets: [{
- label: 'English',
- data: english
- },
- {
- label: "Math",
- data: math,
- }]
- }
- });
- </script>
上述代码可以绘制出最简单的图表, 如下图所示:
data 对象中, 有三个属性:
type: 指定图表类型
datasets: 指定数据集合 datasets 中的每个对象就是一组数据集合, 本例子中就是对应的每条曲线
options: 配置参数用来配置图表的额外信息, 如图表的标题, x 轴和 y 轴的设置等
2. 修改图表样式
这里修改线条的默认颜色, 取消线条下部的颜色填充, 增加图表的标题, 设置图例的样式, 修改 tooltip 的提示样式
详细参数配置请参考: Line
代码如下:
- var myChart = new Chart(ctx, {
- type: 'line',
- data: {
- labels: month,
- datasets: [{
- label: 'English',
- data: english,
- // 线条颜色
- borderColor: "rgba(68,190,190,1)",
- // 填充颜色
- fill: true,
- // 线条下方的填充颜色
- backgroundColor: "rgba(68,190,190,.3)"
- },
- {
- label: "Math",
- data: math,
- borderColor: "rgba(250,150,30,1)",
- // 取消填充后, 只有图例中会显示相应背景色
- backgroundColor: "rgba(250,150,30,.3)",
- // 取消填充
- fill: false
- }]
- },
- options: {
- // 图表标题
- title: {
- display: true,
- text: "月考成绩曲线图"
- },
- // 图例设置
- legend: {
- labels: {
- padding: 30,
- // 使用圆形样式
- usePointStyle: true
- },
- // 显示位置
- position: 'bottom'
- },
- // tooltip 提示样式
- tooltips: {
- enabled: true,
- // 同时显示 x 轴上的数据
- // 这里鼠标移到对应点上会同时显示 english 和 math 的成绩
- mode: 'index',
- // 通过回调修改 tooltips 的标题
- callbacks: {
- title: function(item) {
- return "第" + item[0].xLabel + "月"
- }
- }
- }
- }
- });
修改后图表如下图所示:
修改后的 tooltip 显示效果如下图所示:
这里修改了 tooltip 的标题, 并同时显示该 x 轴位置的所有数据, english 和 math
更多 tooltip 的配置请参考: Tooltips
目前 y 轴的值是直接从 70 开始, 这里默认选取了 y 轴的最小值作为起始值如果要改为从其他值开始, 这里就要对 options 中的 scales 属性进行修改
3. Scales
scales 可以对 x 轴和 y 轴的对应的属性进行修改, 其中 ticks 属性可以修改对应轴的起始值
代码如下:
- options: {
- // 图表标题
- title: {
- display: true,
- text: "月考成绩曲线图"
- },
- ...scales: {
- // x 轴
- xAxes: [{
- // 背景网格
- gridLines: {
- // 取消 x 轴的竖线
- display: false,
- // 设置 x 轴线颜色
- color: "black",
- },
- // x 轴标题
- scaleLabel: {
- display: true,
- labelString: "考试月数",
- },
- }],
- // y 轴
- yAxes: [{
- gridLines: {
- color: "black",
- // 以点线显示
- borderDash: [2, 5],
- },
- scaleLabel: {
- display: true,
- labelString: "分数",
- },
- // 设置起止数据和步长
- ticks: {
- min: 60,
- max: 100,
- stepSize: 5
- }
- }]
- }
- }
修改后图表如下图所示:
4. 参考
- code.tutsplus.com/tutorials/g
- tobiasahlin.com/blog/chartj
来源: https://juejin.im/post/5a7bbf0c6fb9a0634417d138