Chart.js LineChart如何仅显示数据集的一部分并支持水平滚动

Question

我正在使用 Chart.js 2.5。我的情况是，我有一个包含 40 个数据的数据集，但我只想在折线图中显示 7 个数据，但仍然可以水平向左/向右移动以发现其余数据。

我尝试了ticks.maxTicksLimit、ticks.max等，但是，它只是缩放了XAxis标签，所有40个数据仍然显示。

有人可以帮忙吗？谢谢

Answer 1

我认为您的问题取决于您在图表上显示的值或标签。对于数字或字符串，您可以在ticks.min和ticks.max上设置最小值和最大值，它在chart.js 2.8中对我有用。不确定 Chart.js 2.5 是否可以工作，因为我看到了一些关于如何在 Chart.js 2.6 版本中增强此功能的帖子。

如果您的 x 轴标签显示 DateTime 对象，并且您在 options.scales.xAxes 中使用 type: 'time'。然后您可以将 time.min 和 time.max 包含在 xAxes 中。

options: {
  scales: {
    xAxes: [
      {
        type: 'time',
        time: {
          displayFormats: {
            week: 'D MMM YY'
          },
          unit: 'day',
          tooltipFormat: 'll',
          min: moment('2019-06-30'),
          max: moment('2019-09-01')
        },
        display: true,
        ticks: {
          padding: 20,
          // set this min max if you are using number or string as your axis label
          // min: 10,
          // max: 30
        }
      }
    ],
    yAxes: [
      {
        display: true,
        ticks: {
          beginAtZero: true,
          maxTicksLimit: 8
        }
      }
    ]
  }
};

这对我有用，希望它也能帮助您的用例。让我知道事情的后续。干杯:)