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。

这是用内置功能可以做到的吗？我目前的方法是手动插入缺失的ticks作为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。

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

new Chart(document.getElementById("chart"), {
  type: "bar",
  data: {
    datasets: [{
      label: "My Dataset",
      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 },
      ],
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)"],
      borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)"],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{      
        ticks: {
          beginAtZero: true,
          stepSize: 1
        }
      }],
      xAxes: [{
        offset: true,
        type: 'time',
        time: {
          parser: 's',
          unit: 'second',
          displayFormats: {
            second: 's'
          }
        },
        ticks: {   
          stepSize: 1
        },
        gridLines: {
          offsetGridLines: true
        },
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="80"></canvas>