图表.js折线图：设置价格变动时，在 x 轴上显示最近的日期。maxTicksLimit

Question

我目前正在使用图表制作折线图.js在过去的30年中。虽然我每年都有一个数据点，但我无法在 x 轴上为每个年份添加标签。30年不适合那里。因此，我选择仅列出一些年份，通过设置ticks: {    maxTicksLimit: SOME_LIMIT_I_MADE}这是我的图表的样子的照片最近的数据点在2020年，最老的数据点在1991年。似乎设定最早的一年就开始了规模。然后，刻度以固定的间隔向前跳跃。maxTicksLimit我真正想要的是将最近的2020年显示在秤上（以便用户可以看到数据是新的）。有没有办法让比例尺从最大年份开始，然后从那里向后跳过（与我的图表目前的情况相反）？谢谢！

Answer 1

这可以通过以某种方式实现您自己的 ticks.maxTicksLimit 来解决。您必须按以下步骤操作。xAxis

1. 将 定义为时间笛卡尔轴，该轴使用包含 和 属性的对象将 接受 为 数据点数组。xAxisdataxy

2. 从数据中包含的年份中生成一个数组。此数组应包含起始年份和结束年份以及两者之间平均分布的年份（请参阅下面代码段中的函数）。labelscreateLabels

3. 告诉图表.js通过定义 tick.sources：“标签”来生成给定标签。ticksxAxis

const data = [];

for (let year = new Date().getFullYear() - 29; year <= new Date().getFullYear(); year++) {

  data.push({

    x: year.toString(),

    y: Math.floor((Math.random() * 6) + 1)

  })

}

const maxTicksLimit = 6;

function createLabels() {

  const years = data.map(o => Number(o.x));

  const startTime = years[0];

  const endTime = years[years.length - 1];

  const tickGap = (endTime - startTime) / (maxTicksLimit - 1);

  const labels = [startTime];

  for (let i = 1; i < maxTicksLimit - 1; i++) {

    labels.push(Math.round(startTime + i * tickGap));

  }

  labels.push(endTime);

  return labels.map(l => l.toString());

}

new Chart('myChart', {

  type: 'line',

  data: {

    labels: createLabels(),

    datasets: [{

      label: 'Demo',

      fill: false,

      data: data,

      borderColor: 'blue'

    }]

  },

  options: {

    scales: {

      xAxes: [{

        type: 'time',

        time: {

          parser: 'YYYY',

          unit: 'year'

        },

        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="80"></canvas>