Question

我有一个chart.js条形图，其中包含两个名为“橙色”和“灰色”的数据集。每个都有六个值：“ a”，“ b”，“ c”，“ d”和“ f”，结果为current chart

如您所见，它不容易阅读。我想要的是在与其他数据点不同的yA轴中使用“ b”，但是据我所读，只有数据集（在我的情况下为“橙色”和“灰色”）才可以使用不同的轴。

var ctx = document.getElementById("myChart");

var barChartData = {
  datasets: [{
    backgroundColor: "#fe8359",
    borderColor: "#fe8359",
    data: [3000, 3500006, 90000, 12, 80000, 7000],
    label: "orange"
  },{
    backgroundColor: "#e9e9e9",
    borderColor: "#e9e9e9",
    data: [5000, 2500000, 80000, 5, 90000, 9000],
    label: "grey"
  }],
  labels: ["A","B","C","D","E","F"]
};



var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
      maintainAspectRatio: false,
      responsive: true,
      scales: {
        yAxes: [{
          id: 'A',
          type: 'linear',
          position: 'left',
        },{
          display: true,
          id: 'B',
          type: 'linear',
          position: 'right',
          gridLines: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
        }]
      }
    }
});

如何配置图表以正确显示此数据，或者如何容纳数据以正确显示？

Chart.js条形图中的相同数据集具有不同的yAxes

0 个答案: