График JS график времени с событиями - PullRequest
Новая
       5

График JS график времени с событиями

0 голосов
/ 17 апреля 2020

enter image description here

Я пытаюсь построить график, похожий на тот, что на скриншоте: это временная шкала, на которой отображаются события. Но мне нужно, чтобы интервал между событиями соответствовал фактическому времени, поэтому я считаю, что не могу представить события в качестве оси X ... поэтому я действительно не знаю, на что мне следует смотреть.

1 Ответ

0 голосов
/ 18 апреля 2020

Сначала необходимо определить xAxis как декартову ось времени . Затем вы можете определить data вашего набора данных как отдельные точки через объекты, содержащие свойства x и y.

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

const img = new Image(16, 16);
img.src = 'https://i.stack.imgur.com/Q94Tt.png'; 

var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [
        { x: "2020-03-22", y: 0 },
        { x: "2020-04-01", y: 0 },
        { x: "2020-04-02", y: 0 },
        { x: "2020-04-03", y: 0 },
        { x: "2020-04-08", y: 0 },
        { x: "2020-04-12", y: 0 },
        { x: "2020-04-15", y: 0 }
      ],
      pointStyle: img,
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          display: false,
        },        
        gridLines: {
          display: false
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        },
        gridLines: {
          display:false
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="28"></canvas>
...