javascript - 如何显示图中每个点的 Y 轴刻度

Question

我正在使用 chartjs 来显示一些数据，但我在 Y 轴可视化方面遇到了麻烦。我希望图表中的每个点都在 Y 轴上有一个值。现在 Y 轴显示值以 10 为步长。

这是我实际的 yAxis 配置:

yAxes: [{
            position: "left",
            ticks: {
                source:"data",
            } 
        }]

这是实际的图表。我只想在 Y 轴上显示所显示点的实际值。在 X 轴上，此配置有效，时间与点对齐。

预期:

Answer 1

您必须使用 Axis Callbacks (docs) ，尤其是 afterBuildTicks。

在我的linked example (jsbin)我将 0 压入我的数据，因为您不能使用 beginAtZero: true 并删除数组中的所有重复项。

data.push(0); //if 'beginAtZero' is wanted
let uniqueData = data.filter((v, i, a) => a.indexOf(v) === i);

在选项中，您可以在 afterBuildTicks 中定义最小值和最大值以及刻度。

options: {
  scales: {
    yAxes: [{
      ticks: {
        autoSkip: false,
        min: Math.min(...uniqueData),
        max: Math.max(...uniqueData)
      },
      afterBuildTicks: function(scale) {
        scale.ticks = uniqueData;
      }
    }]
  }
}

你会遇到重叠刻度的问题，但我不知道防止这种情况的一般方法，我也不知道你的具体用例。