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

Question

我正在尝试使用horizontalBar图表在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轴的负值（红色值）。

这是jsFiddle

Answer 1

更改您的第二个数据＆＃39;对象＆＃39;标签＆＃39;和＆＃39; yAxisID＆＃39;来自＆＃39; B＆＃39;的值到了＆＃39;。此外，您可以删除第二个＆＃39; yAxes＆＃39;底部的物体。

所以它看起来像这样：

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：https://jsfiddle.net/vjt2r1mL/362/