如何创建具有多个 yAxes 刻度的条形图？

Question

我有以下代码：

data = {
    labels: ["CategoryA", "CategoryB"],
    datasets: [
        {
           label: "Group A",
           data: [95, 1]
        },
        {
           label: "Group B",
           data: [80, 3]
        }
    ]
};

new Chart(ctx, {
        type: 'bar',
        data: data, 
        options: option
});

我的目标是直接比较每个类别的 Group A 和 Group B 中的数字。但是，CategoryA 的条形占据了整个垂直空间，而 CategoryB 几乎不可见。

如何让CategoryA 显示在 0 到 100 的范围内，CategoryB 的显示范围从 0 到 5？

编辑： Here 是我遇到的问题。无法仅使用一张图表来解决问题，最终只使用了两个单独的图表。如果有人知道如何在一张图中做到这一点，请告诉我！

Answer 1

很遗憾，目前 ChartJS 中没有内置方法来实现这一点。

不过，我能想到的一种方法是创建两个不同的图表并将它们放在彼此的顶部，这样......

// CHART 1
var data = {
   labels: ["Category A", "Category B", "Category C"],
   datasets: [{
      label: "Group A",
      data: [95, 0, 0],
      backgroundColor: 'blue'
   }, {
      label: "Group B",
      data: [60, 0, 0],
      backgroundColor: 'red'
   }]
};
var option = {
   scales: {
      yAxes: [{
         ticks: {
            min: 0,
            max: 100
         }
      }]
   }
}
new Chart(ctx, {
   type: 'bar',
   data: data,
   options: option
});

// CHART 2
var data2 = {
   labels: ["Category A", "Category B", "Category C"],
   datasets: [{
      label: "Group A",
      data: [0, 1, 2],
      backgroundColor: 'blue'
   }, {
      label: "Group B",
      data: [0, 3, 4],
      backgroundColor: 'red'
   }]
};
var option2 = {
   scales: {
      yAxes: [{
      	position: 'right',
         ticks: {
            min: 0,
            max: 5
         }
      }]
   }
}
new Chart(ctx2, {
   type: 'bar',
   data: data2,
   options: option2
});

#chart-wrapper {
   display: flex;
}
#ctx2 {
   position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="chart-wrapper">
   <canvas id="ctx"></canvas>
   <canvas id="ctx2"></canvas>
</div>