重叠的chart.js堆叠图答案

【问题标题】：chart.js stacked graph that overlaps重叠的chart.js堆叠图
【发布时间】：2018-06-15 19:51:51
【问题描述】：

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

例如：stackgraph

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

到底有没有真正让它们像那样重叠，而不仅仅是总数为 100？

【问题讨论】：

类似this?

标签： javascript chart.js chart.js2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

没关系，我找到了答案。

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

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

【讨论】：

如果您从我发布的评论中得出这个答案，请接受我的回答。
我没有，但因为你先得到它，我接受了它
为了完整起见，我更喜欢这个答案而不是wahwahwah's。从接受的答案中粘贴代码的位置更加明显。我也试过没有ticks，它似乎也能正常工作。

【解决方案3】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。