首页 > 解决方案 > ChartJS 无法为时间序列数据呈现水平条形图

问题描述

这是一个解释问题的 plunker https://embed.plnkr.co/plunk/49kIfy8OShzlzu5J 。

如果图表type更改为barline它工作正常。但它无法呈现horizontalBar- 没有错误或警告表明任何问题(如果有)。

是否horizontalBar需要用户手动明确地设置标签,还是我在这里缺少配置设置?

标签: javascriptchart.jsbar-charttimeserieschart

解决方案


使用时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>


推荐阅读