angular - 如何使用chart.js动态设置轴上的刻度？

Question

我们的值在加载站点时可能会有所不同，并且我们希望动态设置刻度步长。我们在同一个图表中有两个具有不同单位的数据集，并且希望水平网格线相互匹配。一方面，它是 0-100% 的比例，以 20 为步长。另一方面，我们希望最大值为 10 的倍数，并将步长设置为最大值的 1/5(因此网格线应相互匹配)。但是 stepsize 除非 fix 输入为“10”(见 id: 'B')或类似的不会被加载。我们尝试使用类变量动态设置它，但没有用。我们使用 Angular5 和 ng2-charts 库

public averageOptions: any = {
legend: {
  labels: {
    fontColor: 'rgb(255,255,255)',
    fontSize: 15
  }
},
scales: {
  yAxes: [{
    id: 'A',
    type: 'linear',
    position: 'left',
    ticks: {
      min: 0,
      max: 100,
      stepSize: 20,
      fontColor: 'rgb(255,255,255)',
      fontSize: 15,
      callback: function (value) {
        return value + '%';
      }
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }, {
    id: 'B',
    type: 'linear',
    position: 'right',
    ticks: {
      min: this.totalVotesMin,
      max: this.totalVotesMax,
      fontColor: 'rgb(255,255,255)',
      fontSize: 15,
      stepSize: 10
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }],
  xAxes: [{
    ticks: {
      fontColor: 'rgb(255,255,255)',
      fontSize: 15
    },
    gridLines: {
      zeroLineColor: 'rgb(255,255,255)',
      color: 'rgb(255,255,255)'
    }
  }]
}
  };

我们发现了这个有点相关的主题，但我们不知道刻度数组的外观或如何设置它，因为没有关于它的文档:
Chart.js - Setting max Y axis value and keeping steps correct

Answer 1

看起来很长，但您可以使用以下代码根据输入数据更改步长和最大值。

ticks: {
            min: 0,
            callback: function(value, index, values) {
                if (Math.floor(value) === value) {
                    return value;
                }
            }
      }