Chart.js如何获取动态生成的y轴最小刻度标签值

问题原因 #

你调用的myLineChart.options.scales.yAxes[0].ticks.min只能读取你手动配置的y轴最小刻度值。Chart.js自动计算生成的动态刻度不会回写到options配置对象中，因此未手动设置该属性时会返回undefined。

解决方法 #

对于你使用的Chart.js v2.x版本，自动计算的刻度值存储在图表实例的scales属性下，直接读取对应y轴的ticks数组的第一个元素即可得到最低标签值：

// 需等待图表渲染完成后执行
const minYLabel = myLineChart.scales['y-axis-0'].ticks[0];
console.log(minYLabel); // 你的示例中将输出30

• 单y轴场景下默认的轴ID为y-axis-0，多y轴场景请替换为你对应的轴ID
• 如果需要数值类型的结果，可以用Number()方法转换返回的标签值
• 建议将获取逻辑放在图表渲染完成的回调中，避免刻度未计算完成导致取值错误

完整可运行示例 #

var ctx = document.getElementById('myChart').getContext('2d');

var data = {
  labels: ["data1", "data2", "data3", "data4", "data5", "data6"],
  datasets: [{
    label: "Sample data",
    data: [128, 56, 47, 64, 125, 36],
    borderColor: "rgba(0, 128, 0, 1)"
  }]
};

var myLineChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: {
    onAnimationComplete: function() {
      // 图表动画、渲染全部完成后再取值，保证结果准确
      const minYValue = Number(myLineChart.scales['y-axis-0'].ticks[0]);
      console.log(minYValue); // 输出30
    }
  }
});

内容的提问来源于stack exchange，提问作者JAT86