Javascript 创建堆叠预算与实际图表

我试图使用chartJS创建一个实际与预算金额的叠加预算

所以我的目标是创造这样的东西

我已经走了这么远了

新图表（document.getElementById（“chartjs-7”）{
“类型”：“条”，
“数据”：{
“标签”：[“汽油”、“食品”、“儿童俱乐部”、“酒精”]，
“数据集”：[{
“标签”：“实际支出”，
“数据”：[70,100,20,29]，
“边框颜色”：“rgb（6319163）”，
背景色：“rgba（6319163）”
}, {
“标签”：“预算金额”，
“数据”：[60,150,20,30]，
“类型”：“条”，
“填充”：假，
“边框颜色”：“rgb（63,65,191）”，
“背景色”：“rgba（63、65、191）”
}]
},
“选择”：{
“天平”：{
“雅克斯”：[{
“滴答声”：{
“beginAtZero”：真的吗
}
}]
}
}
});
您必须将
stacked:true
添加到
xAxes
：

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

演示：


新图表（document.getElementById（“chartjs-7”）{
“类型”：“条”，
“数据”：{
“标签”：[“汽油”、“食品”、“儿童俱乐部”、“酒精”]，
“数据集”：[{
“标签”：“实际支出”，
“数据”：[70,100,20,29]，
“边框颜色”：“rgb（6319163）”，
背景色：“rgba（6319163）”
}, {
“标签”：“预算金额”，
“数据”：[60,150,20,30]，
“类型”：“条”，
“填充”：假，
“边框颜色”：“rgb（63,65,191）”，
“背景色”：“rgba（63、65、191）”
}]
},
“选择”：{
“天平”：{
“xAxes”：[{
“堆叠”：没错，
}],
“雅克斯”：[{
//“堆叠”：没错，
“滴答声”：{
“beginAtZero”：真的吗
}
}]
}
}
});

您是只需要一个条形图和标签来显示所有内容，还是希望条形图/颜色也堆叠在一起？也要堆叠颜色。因此，蓝色代表预算，绿色代表支出，红色代表超出预算的任何东西@GeorgeThis并不符合这里的目标。其目的是显示有点像一个百分比条。因此，预算金额为100，实际金额为60，最多应填写60分。这两个堆栈都在顶部，所以它将显示为160对axsis。所以，如果你看一下儿童俱乐部，它会填满40个，因为实际值是20，buget值是20，这个栏应该显示为完全绿色接受这个答案，只需要将叠加也改为false