Javascript 如何使用ChartJS创建堆叠图形

到目前为止，我已经成功地使用ChartJS创建了一个折线图。但我想把它做成一个堆叠的图形

以下是我到目前为止所拥有的：

define(['backbone'], function(Backbone)
{
    var fifthSubViewModel = Backbone.View.extend(
    {
        template: _.template($('#myChart5-template').html()),

        render: function(){
          $(this.el).html(this.template());
          var ctx = this.$el.find('#lineChart5')[0];
          var lineChart = new Chart(ctx, {
          type: 'line',
            data: {
              labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                label: "Unavailable Unit",
                backgroundColor: "rgba(38, 185, 154, 0.31)",
                borderColor: "rgba(38, 185, 154, 0.7)",
                pointBorderColor: "rgba(38, 185, 154, 0.7)",
                pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointBorderWidth: 1,
                data: this.model.attributes.unavailThisYear
              }, {
                label: "Vacant Unit",
                backgroundColor: "rgba(3, 88, 106, 0.3)",
                borderColor: "rgba(3, 88, 106, 0.70)",
                pointBorderColor: "rgba(3, 88, 106, 0.70)",
                pointBackgroundColor: "rgba(3, 88, 106, 0.70)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(151,187,205,1)",
                pointBorderWidth: 1,
                data: this.model.attributes.vacThisYear 
              }]
            },
            options: {
              scales: {
                yAxes: [{
                  scaleLabel: {
                    display: true,
                    labelString: 'Income in $'
                  }
                }]
              }
            }
          });
        },
        initialize: function(){
            console.log("In the initialize function");
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
            this.render();
        }   
    });

    return fifthSubViewModel;
});

目前，我在一张图表上得到了两个折线图。但我想把它们叠起来。我的意思是，第二条直线图的起点应该是第一条直线图的起点。因此，该区域不应重叠。有什么方法可以告诉我的折线图从另一个折线图结束的值开始，从而得到一个叠加图

当前屏幕截图未堆叠：

---

根据最新chartjs版本的文档，需要在要堆叠的轴上将stacked属性设置为true。因此，在您的情况下，它将是：

       options: {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Income in $'
              },
              stacked: true
            }]
          }
        }

---

有关更多信息，请转到

是否尝试在scaleLabel属性旁边设置stacked:true？否。我对所有这些都是新手，所以我不知道。我是否应在两种折线图配置中都设置scaleLabel:true？很好，文档说您应该把yax:[{scaleLabel:{display:true，labelString:'Income in$'}，stacked:true}]放进去。不知道那会是什么样的显示你介意把链接指给我看吗。我会非常感激的。谢谢一个小小的疑问。我现在正在整理图表。我的意思是，这些值被正确地追加，而第二个折线图将这些值追加到第一个折线图上。唯一的问题是图形是透明的。我的意思是，假设我给单线图涂上蓝色，给二线图涂上红色。所以我想看到两种不同颜色的折线图。但在底部区域（我指的是普通的一个），在叠加后应该只属于第一个图形。颜色重叠了。你明白我说的吗？请引导我。非常感谢！我想在底部阴影区域看到单独的“蓝色”，在上面的堆叠区域看到单独的“红色”，这属于第二个折线图。但是我不能做到这一点。你能用一个例子做一个JSFIDLE吗？我必须改变不透明度，现在一切都正常了。再次感谢你。：）