Javascript 水平条形图js中的多个y轴

我正在尝试使用

水平条

图表在chartjs中绘制多个y轴

以下是最终图形的外观：

这是我的图表配置：

{
  type: 'horizontalBar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [10, 20, 30, 40, 50],
      backgroundColor: 'blue'
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [10, 20, 30, 40, 50],
      backgroundColor: 'red'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      yAxes: [{
        id: 'A',
        position: 'left'
      }, {
        id: 'B',
        position: 'right'
      }]
    }
  }

第一个数据集（蓝色数据集）正确显示并具有正确的y轴值（即

a

、

b

、

c

，等等）

但第二个数据集根本没有出现。此外，第二个数据集（右侧）的y轴显示的是

50

、

40

、

30

等，而不是

a

、

b

、

c

PS:必须同时显示两个y轴。这是因为我必须在右侧的y轴上绘制正值（蓝色值），在左侧的y轴上绘制负值（红色值）

---

以下是将第二个“data”对象的“label”和“yAxisID”值从“B”更改为“A”的方法。此外，您还可以删除底部的第二个“yAxes”对象

所以看起来是这样的：

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'horizontalBar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 90, 80, 70, 60],
      backgroundColor: 'blue'
    }, {
      label: 'A',
      yAxisID: 'A',
      data: [-100, -90, -80, -70, -60],
      backgroundColor: 'red'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        position: 'left'
      }]
    }
  }
});

---

jsfiddle:

谢谢，但这并不是我想要的，因为左侧仍然有一个y轴。对于所有正（蓝色）值，我必须在右侧显示勾号标签（使用第二个y轴）@ℊ谢谢，但这不是我想要的，因为左边还有一个y轴。对于所有正（蓝色）值，我必须在右侧显示勾号标签（使用第二个y轴）@ℊααnd我添加了我最终期望的图像