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

Question

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

这是我实际的yAxis配置：

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

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

预期：

Answer 1

您必须使用轴回调（文档），尤其是afterBuildTicks.

在我的链接示例（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;
      }
    }]
  }
}

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