Javascript 带有隐藏条的C3js堆叠条形图
场景:我需要显示一个关于付款细节的条形图,客户使用信用卡、支票或现金为产品支付了多少钱。还需要在堆叠条形图中显示总值Javascript 带有隐藏条的C3js堆叠条形图,javascript,d3.js,c3.js,Javascript,D3.js,C3.js,场景:我需要显示一个关于付款细节的条形图,客户使用信用卡、支票或现金为产品支付了多少钱。还需要在堆叠条形图中显示总值 var chart = c3.generate({ data: { columns: [ ['Cash', 30, 200, 100, 400, 150, 250], ['Card', 130, 100, 140, 200, 150, 50], ['Total', 160,300,24
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'
}
});
输出:
我需要显示总值,但不需要显示条形图和图例。你怎么能做到这一点?任何建议都会有帮助。谢谢。您不需要整个数据集,您可以修改工具提示内容,以适应此处答案中的技术动态计算-> 使用.reduce计算总值,以将该点的所有其他值相加。然后使用该值为工具提示创建一个名为“Total”的新数据点,并将其传递给默认渲染器以绘制this.getTooltipContent
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);
}
}
});