我们有值在加载网站时可能会有所不同,我们想要动态设置刻度步长 . 我们在同一个图表中有两个不同单位的数据集,并希望水平网格线相互匹配 . 一方面,它是从0到100%的步长为20的比例 . 另一方面,我们希望最大值为10的倍数,并将步长设置为最大值的1/5(网格线应该相互匹配) ) . 但是步骤大小除非修改类型为“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)'
    }
  }]
}
  };

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