Chart.js 图表库

提供很多图表样式

更多精彩

• 更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线

官方地址

1. chart-js
2. chart-sample

使用方法

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

数据结构

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

Line-线形图 / Bar-柱状图

1. 线形图和柱状图的数据格式基本一致
2. 柱状图对背景色和边框色传入数组，可以让每个柱状显示不一样的颜色
3. 线形图如果没有多色的需求，对背景色和边框可以直接传入单值

{
    "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]
}

常用属性和方法

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

顶层属性配置

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

let cfg = {
  type: 'line',
  data: data,
  options: {}
}

new Chart(ctx, cfg)

显示图表的标题

1. 官方文档在此处 options-title
2. display 默认值是false ，改为true才会显示标题
3. text 标题内容
4. position 是标题位置，默认值是top ，支持 top 、right 、bottom 、left

options: {
  title: {
    display: true,
    text: '图表标题',
    position: 'bottom'
  }
}

对徽章的控制项

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

options: {
  legend: {
    display: true,
    position: 'right'
  }
}

让Y轴的值从0开始

1. 官方文档在此处 options-scales-ticks

options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
}

隐藏X轴标题

1. 官方文档在此处 options-scales-ticks

options: {
  scales: {
    xAxes: [{
      ticks: {
        display: false
      }
    }]
  }
}

更新数据内容

1. 官方文档在此处 update-chart

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 是初始化图表后返回的图表对象，需要再外部指定

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)
  }
}