ChartJS 如何在ng 2-chart中同时使用左右两个y轴?

t5fffqht  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(145)

这是我的demo

输出:我希望直线沿着右侧y轴

我按ID设置了yAxes,但它不起作用。百分比线仍然是遵循左yAxes。我哪里错了?

datasets = [
  {
    data: [3, 10, 4],
    label: 'Application number',
    yAxesID: 'y-axis-l',
  },
  {
    data: [2, 4, 1],
    label: 'Applied',
    yAxesID: 'y-axis-l',
  },
  {
    data: [66.66, 40, 25],
    label: 'Percent',
    type: 'line',
    yAxesID: 'y-axis-r',
    backgroundColor: 'rgba(0,0,0,0)',
  },
];
options = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-l',
          position: 'left',
          // ...
        },
        {
          id: 'y-axis-r',
          position: 'right',
          // ...
        },
      ],
    },
  };
kulphzqa

kulphzqa1#

在您的datasets中用yAxisID替换yAxesID,它将按预期工作。

datasets = [
  {
    data: [3, 10, 4],
    label: 'Application number',
    yAxisID: 'y-axis-l'
  },
  {
    data: [2, 4, 1],
    label: 'Applied',
    yAxisID: 'y-axis-l'
  },
  {
    data: [66.66, 40, 25],
    label: 'Percent',
    type: 'line',
    yAxisID: 'y-axis-r',
    backgroundColor: 'rgba(0,0,0,0)'
  },
];

请看一下您修改后的StackBlitz,看看它是如何工作的。

相关问题