如何在chart.js中的y轴上设置静态值？

Question

单击此处查看Graph图...

Answer 1

那将是一个不错的功能，但是我认为没有直接的方法可以做到这一点。您可以将afterBuildTicks回调与min，max和autoSkip选项结合使用。

修复

afterBuildTicks回调传递给scale对象。标尺对象具有要显示的所有刻度的数组（存储在scale.ticks中），因此您可以在该数组中设置刻度。Chart.js试图使您的图表看起来不错，因此默认情况下它不会显示所有刻度。要解决此问题，请将最小值和最大值设置为自定义比例范围内的最小值和最大值。还要设置autoSkip = false以确保显示所有刻度。

例

jsfiddle与您的示例比例

jsfiddle具有较小的比例范围

var ticks = [11000, 10000, 7000, 3000, 1000, 500, 100];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [{
      data: [6000, 5000, 8000, 2000, 10000, 3500, 6000, 2000, 4000, 6000]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          autoSkip: false,
          min: ticks[ticks.length - 1],
          max: ticks[0]
        },
        afterBuildTicks: function(scale) {
          scale.ticks = ticks;
          return;
        },
        beforeUpdate: function(oScale) {
          return;
        }
      }]
    }
  }
});