C3js帶有隱藏條形的堆積條形圖

Question

情景：我需要顯示有關付款明細的條形圖，客戶使用卡，支票或現金支付產品的金額。並且還需要在堆積的條形圖中顯示總值。

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['Cash', 30, 200, 100, 400, 150, 250], 
      ['Card', 130, 100, 140, 200, 150, 50], 
      ['Total', 160,300,240,600,300,300] 
     ], 
     groups:[['Cash','Card']], 
     type: 'bar' 
    } 
}); 

輸出：

我需要顯示的總價值而不是酒吧和傳奇。如何做到這一點？任何意見將是有益的。謝謝。

Answer 1

你不需要總數據集，你可以改變的提示內容來計算它的飛行（適應在這裏找到答案的技術 - >https://stackoverflow.com/a/36789099/368214）

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['Cash', 30, 200, 100, 400, 150, 250], 
      ['Card', 130, 100, 140, 200, 150, 50], 
     ], 
     groups:[['Cash','Card']], 
     type: 'bar' 
    }, 
    tooltip : { 
     contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
      var total = d.reduce (function(subTotal,b) { return subTotal + b.value; }, 0); 
      d.push ({value: total, id: "Total", name: "Total", x:d[0].x , index:d[0].index}); 
      return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color); 
     } 
    } 
}); 

總價值計算使用.reduce來總結當前所有其他值。然後，讓使用該值稱爲「合計」的提示新的數據點，並將其傳遞給默認渲染圖（this.getTooltipContent）

http://jsfiddle.net/vz1rwvwn/