Диаграмма JS не отображает горизонтальную гистограмму для данных временных рядов - PullRequest
Новая
       19

Диаграмма JS не отображает горизонтальную гистограмму для данных временных рядов

0 голосов
/ 07 февраля 2020

Вот плункер https://embed.plnkr.co/plunk/49kIfy8OShzlzu5J, который объясняет проблему.

Если график type изменяется на bar или line, он работает нормально. Но он не может отобразить horizontalBar - нет ошибок или предупреждений, указывающих на какие-либо проблемы, если таковые имеются.

Требует ли horizontalBar, чтобы пользователь устанавливал метки вручную и явно, или имеется конфигурация настройки я здесь скучаю?

1 Ответ

0 голосов
/ 07 февраля 2020

При использовании 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>
...