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/