Chart.js 图表库

最新推荐文章于 2024-05-31 06:57:39 发布

asing1elife

最新推荐文章于 2024-05-31 06:57:39 发布

阅读量226

点赞数

文章标签： javascript jquery chartjs

本文链接：https://blog.csdn.net/asing1elife/article/details/89248914

版权

提供很多图表样式

官方地址

使用方法

这一块官网讲的还比较清晰，参见 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 是图表的顶层属性配置
1. type 是图表的类型，参照前面数据结构中列举的类型传入即可，注意单词是全小写
2. data 是前面数据结构中提到的各种类型图表的具体数据，格式正确传入即可
3. 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)
  }
}