chart.js -在左侧和右侧显示重复的y轴

kq4fsx7k  于 2022-12-13  发布在  Chart.js
关注(0)|答案(1)|浏览(164)
  • 我知道类似的问题以前已经问过很多次了,但是大多数结果都是针对旧版本的,API已经改变了很多。我找不到“刚刚好用”的3. 5+的代码。*

我在想有没有更好的方法来实现我的愿望。
我将多个数据集Map到chart.js中的一个y轴上。当我们绘制它们的图表以跨时间(x轴)和值进行比较时,这种方法很有效。y轴基于所有数据集展开。
我有一个简单的复制标签的请求,所以他们显示在左边和右边。这似乎并不简单,因为轴Map到数据集一对一。
使用https://stackoverflow.com/a/58525418/2060441并将其更新为我的chart.js版本,我想到了以下方法。**有更好的方法吗?**感觉非常笨拙。值得注意的是,一旦图表选项成为一个对象,直接更新最小值/最大值似乎不起作用,所以我不得不将其全部替换。

// add a dummy dataset, use legend.labels.filter to stop them showing
datasets.push({ yAxisID: 'yAxis2' });
            
// we need to attach to the chart and update *before* we get min/max, in case the data bounds changed
forecast_chart.data.datasets = datasets;
forecast_chart.update();

minTick = forecast_chart.scales.yAxis1.min;
maxTick = forecast_chart.scales.yAxis1.max;

forecast_chart.options.scales.yAxis2 =
{
    type: 'linear',
    position: 'right',
    min: minTick,
    max: maxTick,
    ticks:
    {
        stepSize: 50,
    
    };
};
forecast_chart.update();
forecast_chart.resize();
gajydyqb

gajydyqb1#

您可以这样做:

scales: {
  y: {
    position: "left",
  },
  y1: {
    position: "right",
    afterBuildTicks: (axis) => {
      axis.ticks = [...axis.chart.scales.y.ticks];
      axis.min = axis.chart.scales.y.min;
      axis.max = axis.chart.scales.y.max;
    },
  },
}

相关问题