C3 比较小时

介绍

C3 是一个基于 D3.js 的交互式图表库，能够方便地创建数据可视化图表。本篇文章主要介绍 C3 比较小时的功能。

代码片段

以下是一个简单的代码片段，展示如何使用 C3 比较小时的功能。

// 定义数据
var data = {
  columns: [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 20, 10, 40, 15, 25],
    ['data3', 10, 20, 30, 40, 50, 60]
  ],
};

// 配置图表
var chart = c3.generate({
  data: data,
  axis: {
    x: {
      type: 'category',
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    }
  },
  tooltip: {
    format: {
      value: function (value, ratio, id) {
        return value + ' hours';
      }
    }
  },
  // 比较小时
  compare: {
    data1: [1,4],
    data2: [2,5],
    data3: [3,6]
  }
});

解析

代码中的 compare 属性用于比较每个数据系列的时间段。它需要一个对象作为其值，对象的键名为数据系列的名称，键值为一个数组，表示需要比较的时间段。例如，data1: [1,4] 表示比较数据系列 data1 的第一个时间段（指第一个数据点）和第四个时间段。

在图表中，比较小时的数据点将会以箭头标记出来。此外，鼠标悬浮在数据点上时，还会显示该时间段与其它时间段的比较结果，以及比较的数据系列。

效果

以下是代码片段生成的图表效果：

注：箭头红色表示该时间段与其它时间段相比增加，箭头蓝色表示减少，箭头黑色表示相等。