Question

所以在Chart.js中，我有一个基于一系列日期的时间序列。图表无法将所有日期显示为轴标签，因此显示了合理的选择。它始终在轴的左侧显示第一个日期，但并不总是在轴的右端显示最后一个日期。

例如，我的日期范围可能是每天从1月1日到7月30日。该轴将从1月1日开始，但结束日期可能是7月27日或29日。

对我来说，结束日期比开始日期重要。有没有办法可靠地显示最后一个日期，并让开始日期为变化的日期？

Answer 1

这可以通过在xAxis上实现自己的ticks.maxTicksLimit来解决。您将必须按照以下步骤进行操作。

使用每个对象包含xAxis和data属性的对象，将x定义为time cartesian axis，将y接受为data points的数组。
从数据中包含的日期中生成labels数组。此数组应包含开始日期和结束日期以及两者之间的多个等距天数（请参见下面的代码片段中的函数createLabels）。
告诉Chart.js通过定义tick.sources: 'labels'从给定标签在ticks上生成xAxis。

const data = [];
let date = Date.parse('2020-01-01');
for (let day = 1; day <= 31; day++) {
  date = new Date(date);
  date.setDate(day);
  data.push({
    x: date,
    y: Math.floor((Math.random() * 6) + 1)
  })
};

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

new Chart('myChart', {
  type: 'line',
  data: {
    labels: createLabels(),
    datasets: [{
      label: 'My Dataset',
      fill: false,
      data: data,
      borderColor: 'blue'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        },
        ticks: {
          source: 'labels'
        }      
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

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

使时间序列显示轴上的最后日期？

1 个答案: