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几乎看不到。

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

编辑： 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>

如何创建具有多个yAxes比例的条形图？

1 个答案: