如何使用 ChartJS 创建堆叠图

Question

到目前为止，我已经使用 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;
});

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

当前未堆叠的屏幕截图：

Answer 1

根据最新 chartjs 版本的文档，您需要在要堆叠它们的轴中将堆叠属性设置为 true。所以在你的情况下它将是：

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

有关详细信息，请转至 ChartJs Docs

如何使用 ChartJS 创建堆叠图

How to create a stacked graph using ChartJS

javascript

charts

graph

backbone.js

chart.js