Chart.js - 带有线性笛卡尔（数字）X 轴的条形图？

Question

我正在使用 Chart.JS，我想创建一个条形图，其中 X 轴是线性的。关于这样做的文档很少，而且我无法获得一组有效的配置。

例如，假设我有以下对：(1, 1), (2, 2), (3, 3), (5, 1), (6, 5), (7, 1). 我想绘制一个条形图，其中 x 值 1 的条形高度为 1，x 值 6 的条形高度为 5，依此类推。但是，我希望数字 4（不包含在我的配对中）在 x 轴上仍然可见，值为 0。

这是具有内置功能的可能性吗？我当前的备份只是手动插入缺失的刻度作为 y 值为 0 的类别，但如果只有一个选项就好了。

Answer 1

您可以将data您的dataset对象指定为带有x/y坐标，但仅当使用时间刻度时。因此，您的数据必须定义如下。

data: [
  { x: '1', y: 1 },
  { x: '2', y: 2 },
  { x: '3', y: 3 },
  { x: '5', y: 1 },
  { x: '6', y: 5 },
  { x: '7', y: 1 },
],

除此之外，您还需要定义xAxis如下：

xAxes: [{
  offset: true,
  type: 'time',
  time: {
    parser: 's',
    unit: 'second',
    displayFormats: {
      second: 's'
    }
  },
  ticks: {
    stepSize: 1
  },
  gridLines: {
    offsetGridLines: true
  },
}]

请注意，Chart.js 使用Moment.js来实现时间轴的功能。因此，您应该使用Chart.js 的捆绑版本，其中在单个文件中包含 Moment.js。

请查看下面的可运行代码片段。

data: [
  { x: '1', y: 1 },
  { x: '2', y: 2 },
  { x: '3', y: 3 },
  { x: '5', y: 1 },
  { x: '6', y: 5 },
  { x: '7', y: 1 },
],

xAxes: [{
  offset: true,
  type: 'time',
  time: {
    parser: 's',
    unit: 'second',
    displayFormats: {
      second: 's'
    }
  },
  ticks: {
    stepSize: 1
  },
  gridLines: {
    offsetGridLines: true
  },
}]