chart.js 重叠的堆叠图

Question

我正在创建一个堆叠条形图，但我需要它不仅仅是将两个值加在一起并显示它。

例如：stackgraph

此图表应该显示 "goal" 百分比和实际百分比。因此，如果该列的目标值为 70，实际值为 30，它将显示 0-30 的实际数字颜色，然后继续 30-70 的目标颜色。

有没有办法真正让它们像那样重叠而不是总共 100 个？

Answer 1

没关系，我找到了答案。

options: {
              scales: {
                xAxes: [{ stacked: true }],
                yAxes: [{
                        ticks: {
                            beginAtZero:true
                        },
                        stacked: false
                }]
              }
            }

您只需将堆叠的 xAxes 设置为 true，将 yAxes 设置为 false

Answer 2

您必须将这些参数添加到您的代码中 - 为 X 轴启用堆叠并为 Y 轴禁用它：

  xAxes: [{ stacked: true }],
  yAxes: [{
    stacked: false,
    ticks: {
      beginAtZero: true,
    },
  }]

Answer 3

scales: {
  xAxes: [{
      stacked: true
  }],
  yAxes: [{
      stacked: false,
      ticks:{
          suggestedMax:50,
          suggestedMin:1,
          beginAtZero:true,
          max:100,
          autoSkip:true,
          lineHeight:2
      }
  }]
}

chart.js 重叠的堆叠图

chart.js stacked graph that overlaps

javascript

chart.js

chart.js2