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的{{1}}指定为objects with x/y坐标，但只能在使用time scale时使用。因此，您的数据必须定义如下。

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 }, ],，如下所示：

xAxis

请注意，Chart.js使用Moment.js作为时间轴的功能。因此，您应该使用在单个文件中包含Moment.js的Chart.js的bundled version。

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

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

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
        },
      }]
    }
  }
});

Answer 2

uminder的答案是正确的，但是使用“秒”作为时间单位的问题是您不能在X轴上设置大于59的值。如果这样做，该图表将显示为空白。

只需更改时间数据以使用年份，就可以设置所需的任何值。

time: {
      parser: 'Y',
      unit: 'year',
      displayFormats: {
        year: 'Y'
      }
}

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

2 个答案: