主页 / coding / 问题 / 79115735
Accepted
Ghassan Karwchan
Asked: 2024-10-23 05:06:45 +0800 CST

如何配置升级到 4 个刻度数

  • 772

我从 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
          }
        },
      }

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

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

问题是：

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

charts

1 个回答

  1. Best Answer

    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
    }
  },
}
    • 1

相关问题