如何配置多少个刻度线升级到4

Question

我从 ChartJs 2 升级到 4。 布局和刻度仍然不像以前。

这是旧版本 2（顶部）和新版本 4（底部）之间的比较

这是另一个例子： 版本2

版本4

这是我的图表配置代码：

options: {
        legend: { display: false },
        responsive: false,
        maintainAspectRatio: false,
        scales: {
          x: {
              type: "time",
              distribution: "timeseries",
              time: { parser: "YYYY-MM-DDTHH:mm", tooltipFormat: "ll" },
              ticks: {
                source: "data",
                maxRotation: 90,
                minRotation: 90,
                autoSkip: false
              }
            },
          y: { ticks: { beginAtZero: true, major: { enabled: true } , autoSkip: false } }
        },
        tooltips: {
          callbacks: {
            label: this.label || defaultLabel
          }
        },
      }

这是每个 Line 数据集的共享配置：

{
data: [],
  backgroundColor: "#2bb2e7",
  borderColor: "#2bb2e7",
  color: '#000',
  fill: false,
  label: "",
  pointRadius: 5,
  pointHoverRadius: 20,
  borderWidth: 3,
  cubicInterpolationMode: 'monotone',
  tension: 0.4
}

问题是：

如何控制“Y”轴上显示的刻度数（版本 2 更好地自动计算多少刻度）？

Answer 1

您可以使用

stepSize

和

maxTicksLimit

调整所需的刻度数。

作为参考，请查看此处的定义：
https://www.chartjs.org/docs/latest/api/#radialtickoptions

options: {
  legend: { display: false },
  responsive: false,
  maintainAspectRatio: false,
  scales: {
    x: {
      type: "time",
      distribution: "timeseries",
      time: { 
        parser: "YYYY-MM-DDTHH:mm", 
        tooltipFormat: "ll" 
      },
      ticks: {
        source: "data",
        maxRotation: 90,
        minRotation: 90,
        autoSkip: false
      }
    },
    y: { 
      ticks: { 
        beginAtZero: true, 
        major: { enabled: true }, 
        autoSkip: false,
        stepSize: 5,  // Set the interval for Y-axis ticks
        maxTicksLimit: 100,  // Set the maximum number of ticks displayed
        suggestedMax: 100,  // Suggest the maximum value for Y-axis
        suggestedMin: 0  // Suggest the minimum value for Y-axis
      } 
    }
  },
  tooltips: {
    callbacks: {
      label: this.label || defaultLabel
    }
  },
}