Как использовать даты в качестве оси X с диаграммой. js, даже если нет никакого значения, связанного с осью Y - PullRequest
Новая
       9

Как использовать даты в качестве оси X с диаграммой. js, даже если нет никакого значения, связанного с осью Y

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

Мне бы хотелось, чтобы на диаграмме всегда было значение на конечной оси X,

Я не могу использовать его как "distribution: 'series'", потому что оно выходит за рамки масштаба,

Я не всегда могу угадать, какое значение указать как «time: {min / max}», чтобы оно превышало последнее значение, и я также не могу вручную определить, какие данные будут отображаться на оси Y.

Можно ли определить данные, как в следующем примере?

Значения оси X: 

1 - 2020-04-01
2 - 2020-04-03
3 - 2020-04-08
4 - 2020-04-10
5 - 2020-04-15

С осью Y, например: 

x   x           x  x       x
|_____________|____________|__
04-01       04-07         04-15

Справа теперь я определил эти три значения на оси 04-01 / 04-07 / 04-15 вручную, даже если ни один из данных не имеет 04-07 в качестве даты.

enter image description here

1 Ответ

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

Из вашего кода я вижу, что вы пробовали разные подходы, в том числе ticks.autoskip и ticks.maxTicksLimit. Обе эти опции ограничивают количество меток тиков, если это необходимо, но не гарантируют, что последняя метка соответствует последней точке данных.

Чтобы решить эту проблему в чистом виде, вы должны реализовать свой собственный ticks.maxTicksLimit на xAxis. Это можно сделать следующим образом.

  1. Создайте массив labels из времен, содержащихся в ваших данных. Этот массив должен содержать время начала и окончания данных и указанное количество одинаково распределенных времен между ними (см. Функцию createLabels в исправленном вами коде ниже).
  2. Скажите диаграмму. js, чтобы генерировать отметки на xAxis от заданных этикеток, определив tick.sources: 'labels'. 

const data = [
  { t: new Date("2015-3-15 13:30"), y: 12 },
  { t: new Date("2015-3-25 13:20"), y: 21 },
  { t: new Date("2015-3-26 13:20"), y: 21 },
  { t: new Date("2015-3-27 13:20"), y: 21 },
  { t: new Date("2015-5-14 13:20"), y: 21 },
  { t: new Date("2015-7-25 14:12"), y: 32 },
  { t: new Date("2015-08-01 14:12"), y: 40 },
  { t: new Date("2015-08-10 14:12"), y: 40 },
  { t: new Date("2015-08-11 14:12"), y: 40 },
  { t: new Date("2015-09-20 14:12"), y: 40 }
];

function createLabels(maxTicksLimit) {
  const times = data.map(o => o.t.getTime());
  const startTime = times[0];
  const endTime = times[times.length -1];
  const tickGap = ( endTime - startTime) / (maxTicksLimit - 1);
  const labels = [startTime];
  for (let i = 1; i < maxTicksLimit - 1; i++) {
    labels.push(startTime + i * tickGap);
  }
  labels.push(endTime);
  return labels;
}

var myChart = new Chart(document.getElementById("examChart"), {
  type: 'line',
  data: {
    labels: createLabels(12),
    datasets: [{
      label: 'Demo',
      fill: false,
      data: data,
      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)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          source: 'labels',
          minRotation: 45
        },
        time: {
          unit: 'day',
          displayFormats: {
            day: 'DD/MM/YYYY'
          },
          tooltipFormat: 'DD/MM/YYYY'
        }
      }],
      yAxes: [{
        ticks: {
          suggestedMin: 0
        },
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'y axis'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<div class="container" style="width:50%;">
  <canvas id="examChart"></canvas>
</div>
...