ChartJS 无法呈现时间序列数据的水平条形图

Question

这是一个笨蛋 https://embed.plnkr.co/plunk/49kIfy8OShzlzu5J 这就解释了这个问题。

如果将图表 type 更改为 bar 或 line，则效果很好。但它无法呈现 horizontalBar - 没有错误或警告表明任何问题，如果有的话。

horizontalBar 是否要求用户手动明确设置标签，或者是否有我在这里缺少的配置设置？

Answer 1

使用 horizontalBar 时，必须确保 yAxis 定义为 type: 'time'。您的数据也必须反映这一点并提供正确轴的数据。

{ y: '2020-01-01T00:00:00', x: Math.random() * 20 }

这可能如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Line Chart</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <style>
      canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
    </style>
  </head>

  <body>
    <div style="height: 450px; width: 300px">
      <canvas id="canvas"></canvas>
    </div>
    <script>
      const config = {
        type: 'horizontalBar',
        options: {
          title: { text: 'Bar Chart', display: true },
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            yAxes: [
              {
                offset: true,
                type: 'time'
              },
            ]
          },
        },
        data: {
          datasets: [
            {
              label: 'Label 1',
              borderColor: '#40407a',
              backgroundColor: '#d1ccc0',
              borderWidth: 3,
              data: [
                { y: '2020-01-01T00:00:00', x: Math.random() * 20 },
                { y: '2020-01-01T01:00:00', x: Math.random() * 20 },
                { y: '2020-01-01T01:20:00', x: Math.random() * 20 },
                { y: '2020-01-01T02:10:00', x: Math.random() * 20 },
                { y: '2020-01-01T02:35:00', x: Math.random() * 20 },
                { y: '2020-01-01T03:00:00', x: Math.random() * 20 },
              ],
            },
          ],
        },
      };

      window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
      };
    </script>
  </body>
</html>

ChartJS 无法呈现时间序列数据的水平条形图

ChartJS fails to render horizontal bar chart for timeseries data

javascript

bar-chart

timeserieschart

chart.js