如何制作多个堆叠图表以共享相同的yAxis?

问题描述 投票:0回答:1

我有2个图表,它们具有不同的数据,彼此堆叠。如何使这两个图表共享相同的1 y轴刻度?

我将y轴配置如下:

yAxes: [{
    display: true,
    stacked: true,
    type: "linear",
    scaleLabel: {
      display: true,
      labelString: "Amount in USD"
    },
    ticks: {
      beginAtZero: true,
      max: 150000,
      callback: function(label, index, labels) {

        return label / 1000 + "k";

      }
    }
  }]

和数据集如下:

labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
backgroundColor: "#FFE0B2",
datasets: [{
  label: "Amount of Sales - YTD",
  data: [0, 0, 0, 0, 0, 0, 0, 104920, 87461, 22700, 0, 0],
  backgroundColor: [
    "#FFE0B2"
  ],
  borderColor: [
    "#FF9800"
  ],
  borderWidth: 1,
  pointBackgroundColor: "#FFE0B2",
  pointBorderColor: "#FF9800",
  pointBorderWidth: 2
}, {
  label: "Amount of Commission - YTD",
  data: [0, 0, 0, 0, 0, 0, 0, 1896, 4373, 1135, 0, 0],
  backgroundColor: [
    "#F8BBD0"
  ],
  borderColor: [
    "#E91E63"
  ],
  borderWidth: 1,
  pointBackgroundColor: "#F8BBD0",
  pointBorderColor: "#E91E63",
  pointBorderWidth: 2
}]

请查看:https://jsfiddle.net/pyzaq4j3/

您可以看到,在八月份,点(橙色)设置为〜100k,这是正确的。

但是,该点(粉红色)的值仅为〜1.8k,根据该图,该点几乎为〜100k。

问题:如何设置它,以便粉红色图与橙色图共享相同的y轴?

chart.js chartjs-2.6.0
1个回答
0
投票

问题出在y轴上这条线:

stacked: true,

如果您将其删除,则不会将值堆叠在一起。但是,由于您在数据集上指定了backgroundColor,并且第一个数据集是“ Amount of Sales-YTD”,它具有较高的值,因此它将阻止显示第二个数据集。

© www.soinside.com 2019 - 2024. All rights reserved.