Chart.js - 辅助 Y 轴的比例

时间:2021-02-09 13:35:19

标签: javascript chart.js

我在 Chart.js 中有一个数据集,我想用两种比例显示——一种是绝对数字,一种是百分比。为此,我需要在第二个轴中使用第一个 Y 轴的最大值(然后我可以使用 afterDataLimits 处理它)。有没有办法在不使用某种隐藏的第二个数据集的情况下做到这一点?

scales: {
  yAxes: [{
    id: 'y-primary',
    display: true,
    ticks: {
      beginAtZero: true
    }
  },
  {
    id: 'y-secondary',
    display: true,
    ticks: {
      beginAtZero: true
    },
    position: 'right',
    suggestedMax: ?? // point to y-primary suggested max here?
  }]
}

(百分比不会达到 100,所以我不能只使用辅助轴的默认 0-1 比例)

1 个答案:

答案 0 :(得分:1)

我认为您可以为第二个 y 轴设置一个范围,如下所示: 也许设置一个与你的第一个 y 轴相关的值 --> 建议最小值 - 建议最大值

options: {
    scales: {
        yAxes: [{
            ticks: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }]
    }
}

在第一个 y 轴中,您可以通过 回调函数 访问 y 轴的值,如下所示:

yAxes : [{
            ticks : {
                       beginAtZero : true,
                       **callback** : function(value,index,values){
                                  yAxesticks = values;
                                  return value;
                            }
                    }
          }] 

数组中的第一个值应该是最高的。