如何使用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創建堆疊圖形

回答

相關問題