Как создать диаграмму рассеяния, где ось x представляет день по часам с объектом datetime? chartJS

Question

Я создаю диаграмму рассеяния с диаграммой JS и диаграммой реакции js -2. Я получаю данные для оси x в формате:

2020-07-06T09:17:15.424+00:00

для оси Y я получаю данные в формате:

HH:mm

Я хотел бы иметь ось абсцисс, которая будет представлять целый день на час, поэтому она начинается в 00:00 и заканчивается в 23:59 или 24:00. У меня есть вопрос, как мне поместить метки в диаграмму JS, чтобы, если я передаю объект datetime или строку, диаграмма рассеяния автоматически обнаруживает его значение и помещает его точно туда, где оно принадлежит, а не на строку метки.

Есть способ сделать это?

Answer 1

При использовании точечных диаграмм вы не определяете labels, а определяете данные как массив объектов, каждый из которых содержит свойства x и y.

Далее вы необходимо определить xAxis как декартову ось времени .

Обратите внимание, что Chart. js внутренне использует Moment. js для функциональность оси времени. Поэтому вам следует использовать объединенную версию Chart. js, которая включает Moment. js в одном файле.

Пожалуйста, посмотрите на приведенный ниже фрагмент исполняемого кода.

var myChart = new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: "05:22", y: 12 },
        { x: "12:13", y: 19 },
        { x: "13:45", y: 3 },
        { x: "18:31", y: 5 },
        { x: "19:05", y: 2 },
        { x: "22:55", y: 3 }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      pointRadius: 8,
      pointHoverRadius: 8
    }]
  },
  options: {
    responsive: true,
    legend: {
        display: false
    },
    scales: {      
      xAxes: [{     
        type: 'time',
        time: {
          parser: 'HH:mm',
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'HH:mm'   
          },          
          tooltipFormat: 'HH:mm'          
        },
        ticks: {
          min: '00:00',
          max: '24:00',
          callback: (value, index) => index == 24 ? '24:00' : value
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 5
        }
      }]
    }
  }
});

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