Chart.js 图表库

提供很多图表样式

官方地址

  1. chart-js
  2. chart-sample

使用方法

  1. 这一块官网讲的还比较清晰,参见 getting-started
  2. 需要注意的是提供的 <canvas> 需要有默认宽高,否则会渲染报错

数据结构

  1. ChartJs的数据类型分为 Line-线形图Bar-柱状图Radar-雷达图Doughnut-中空饼图Pie-实心饼图Bubble-气泡图ScatterAreaMixed
  2. 类型很多,但我认为官网文档中对于每种类型的数据结构描述实在是太糟糕了,通常需要打开控制台查看样例的代码结构才能得知
  3. 以下列出一些常用的数据结构

Line-线形图 / Bar-柱状图

  1. 线形图和柱状图的数据格式基本一致
  2. 柱状图对背景色和边框色传入数组,可以让每个柱状显示不一样的颜色
  3. 线形图如果没有多色的需求,对背景色和边框可以直接传入单值
1
2
3
4
5
6
7
8
9
10
11
{
	"labels": ["Java 软件开发初级", "实训阶段性收费稍微测试一下", "免费的随便找一个"],
	"datasets": [{
		"label": "进度汇总",
		"fill": false,
		"data": [10, 30, 66],
		"borderWidth": 1,
		"backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)"],
		"borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"]
	}]
}

Doughnut-中空饼图 / Pie-实心饼图

1
2
3
4
5
6
7
8
{
	"datasets": [{
		"data": [1, 2, 3],
		"backgroundColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)"],
		"label": "Dataset 1"
	}],
	"labels": [1, 2, 3]
}

常用属性和方法

  1. 同样的,官方文档中对于配置属性的讲解也非常让人头疼,通常需要什么内容,都是去例子中查找控制台才能找到
  2. 以下列举一些常用的属性和方法

顶层属性配置

  1. ctx 是获取到的 <canvas> 实例
  2. cfg 是图表的顶层属性配置
    1. type 是图表的类型,参照前面数据结构中列举的类型传入即可,注意单词是全小写
    2. data 是前面数据结构中提到的各种类型图表的具体数据,格式正确传入即可
    3. options 才是真正控制图表显示样式的具体配置,属性非常繁杂,官方描述特别混乱
1
2
3
4
5
6
7
let cfg = {
  type: 'line',
  data: data,
  options: {}
}

new Chart(ctx, cfg)

显示图表的标题

  1. 官方文档在此处 options-title
  2. display 默认值是false ,改为true才会显示标题
  3. text 标题内容
  4. position 是标题位置,默认值是top ,支持 toprightbottomleft
1
2
3
4
5
6
7
options: {
  title: {
    display: true,
    text: '图表标题',
    position: 'bottom'
  }
}

对徽章的控制项

  1. 官方文档在此处 options-legend
  2. 徽章其实就是图表中用来标注每个dataset的元素,显示格式为 颜色-描述
  3. display 默认值是true ,改为false就可以隐藏
  4. position 是徽章位置,默认值是top ,支持 toprightbottomleft
1
2
3
4
5
6
options: {
  legend: {
    display: true,
    position: 'right'
  }
}

让Y轴的值从0开始

  1. 官方文档在此处 options-scales-ticks
1
2
3
4
5
6
7
8
9
options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

隐藏X轴标题

  1. 官方文档在此处 options-scales-ticks
1
2
3
4
5
6
7
8
9
options: {
  scales: {
    xAxes: [{
      ticks: {
        display: false
      }
    }]
  }
}

更新数据内容

  1. 官方文档在此处 update-chart
1
2
3
4
var chart = new Chart(ctx, cfg)

chart.data = data
chart.update()

监听点击事件

  1. 官方文档在此处 event-click
  2. 同样的,官方文档对于事件监听的描述非常不详细,甚至连点击事件的形参都没有描述
  3. 在官方示例中暂时也没有找到对事件监听的内容
  4. 需要注意的事虽然点击的需求一般都是点击某个具体的数据值,但ChartJs的点击事情监听是整个容器
    • 如果点击的是某个数据值,则会返回一个有内容的数组,否则会返回空数组
  5. 返回的数据值对象本身意义也不明确,个人认为有用的值就是索引 chart[0]._index
  6. 之后可以通过索引到整个数据源中去找到对应的值
  7. 以下代码中的 threadChart 是初始化图表后返回的图表对象,需要再外部指定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
options: {
  // 监听事件类型
  events: ['click'],
  onClick: function (e, chart) {
    // 获取点击的对象
    var point = chart[0]

    // 点击空白位置直接返回
    if (point === undefined) {
      return
    }

    // 获取点击对象的索引
    var index = point._index
    // 在数据源中找到对应索引的yLabel值
    var currentDate = threadChart.data.labels[index]

    console.log(currentDate)
  }
}