如何使用ChartJS创建堆叠图形

截至目前，我已经使用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; 
});

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

当前屏幕截图不能堆叠：

来源

2016-08-24 Unbreakable

你试过设置堆叠：真正旁边的scaleLabel财产？ – juvian

不，我是新手，所以我不知道。 – Unbreakable

是否可以在两个折线图配置中都放置scaleLabel：true？请指导 – Unbreakable

据最新chartjs版本的文档，您需要将堆叠属性设置为true，要堆叠起来的轴。所以你的情况这将是：

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

欲了解更多信息，请访问ChartJs Docs

来源

2016-08-24 16:32:29 juvian

有一点疑问。现在我正在堆叠图表。我的意思是值正确地追加和第二折线图将值附加到第一折线图。唯一的问题是图形是透明的。我的意思是假设我给第一个折线图上的蓝色和第二个折线图上的红色。所以我希望看到两个线图都有不同的颜色。 – Unbreakable

但是在堆叠后的底部区域（我的意思是普通区域）应该只属于第一个图形。颜色越来越重叠。你知道我在说什么吗？请引导我。非常感谢！ – Unbreakable

我希望在底部阴影区域看到单独的“蓝色”，并且在独立属于第二个折线图的上述堆叠区域中看到“红色”。但我无法做到这一点。 – Unbreakable

如何使用ChartJS创建堆叠图形

回答

相关问题