时间戳

首页 > 解决方案 > Chart.js - 次 Y 轴的比例

javascript - Chart.js - 次 Y 轴的比例

问题描述

我在 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 比例）

标签： javascriptchart.js

解决方案

我认为您可以为第二个 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;
                            }
                    }
          }]

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

推荐阅读