提供很多图表样式
更多精彩
- 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线
官方地址
使用方法
- 这一块官网讲的还比较清晰，参见 getting-started
- 需要注意的是提供的
<canvas>需要有默认宽高，否则会渲染报错
数据结构
- ChartJs的数据类型分为 Line-线形图 、Bar-柱状图 、Radar-雷达图 、Doughnut-中空饼图 、Pie-实心饼图 、Bubble-气泡图 、Scatter 、Area 、Mixed
- 类型很多，但我认为官网文档中对于每种类型的数据结构描述实在是太糟糕了，通常需要打开控制台查看样例的代码结构才能得知
- 以下列出一些常用的数据结构
Line-线形图 / Bar-柱状图
- 线形图和柱状图的数据格式基本一致
- 柱状图对背景色和边框色传入数组，可以让每个柱状显示不一样的颜色
- 线形图如果没有多色的需求，对背景色和边框可以直接传入单值
{
"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-实心饼图
{
"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]
}
常用属性和方法
- 同样的，官方文档中对于配置属性的讲解也非常让人头疼，通常需要什么内容，都是去例子中查找控制台才能找到
- 以下列举一些常用的属性和方法
顶层属性配置
-
ctx 是获取到的
<canvas>实例 -
cfg 是图表的顶层属性配置
- type 是图表的类型，参照前面数据结构中列举的类型传入即可，注意单词是全小写
- data 是前面数据结构中提到的各种类型图表的具体数据，格式正确传入即可
- options 才是真正控制图表显示样式的具体配置，属性非常繁杂，官方描述特别混乱
let cfg = {
type: 'line',
data: data,
options: {}
}
new Chart(ctx, cfg)
显示图表的标题
- 官方文档在此处 options-title
- display 默认值是false ，改为true才会显示标题
- text 标题内容
- position 是标题位置，默认值是top ，支持 top 、right 、bottom 、left
options: {
title: {
display: true,
text: '图表标题',
position: 'bottom'
}
}
对徽章的控制项
- 官方文档在此处 options-legend
- 徽章其实就是图表中用来标注每个dataset的元素，显示格式为
颜色-描述 - display 默认值是true ，改为false就可以隐藏
- position 是徽章位置，默认值是top ，支持 top 、right 、bottom 、left
options: {
legend: {
display: true,
position: 'right'
}
}
让Y轴的值从0开始
- 官方文档在此处 options-scales-ticks
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
隐藏X轴标题
- 官方文档在此处 options-scales-ticks
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
更新数据内容
- 官方文档在此处 update-chart
var chart = new Chart(ctx, cfg)
chart.data = data
chart.update()
监听点击事件
- 官方文档在此处 event-click
- 同样的，官方文档对于事件监听的描述非常不详细，甚至连点击事件的形参都没有描述
- 在官方示例中暂时也没有找到对事件监听的内容
- 需要注意的事虽然点击的需求一般都是点击某个具体的数据值，但ChartJs的点击事情监听是整个容器
- 如果点击的是某个数据值，则会返回一个有内容的数组，否则会返回空数组
- 返回的数据值对象本身意义也不明确，个人认为有用的值就是索引
chart[0]._index - 之后可以通过索引到整个数据源中去找到对应的值
- 以下代码中的
threadChart是初始化图表后返回的图表对象，需要再外部指定
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)
}
}
