场景:我需要显示一个关于付款细节的条形图,客户使用卡,支票或现金为产品支付的金额。并且还需要在堆积条形图中显示总值。
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'
}
});
输出:
我需要显示总值而不是条形图和图例。怎么办呢?任何意见将是有益的。谢谢。
您不需要总数据集,您可以更改工具提示内容以便在运行中进行计算(使用此处答案中的技术 - > 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计算总值,以汇总该点处的所有其他值。然后使用该值为工具提示创建一个名为“Total”的新数据点,并将其传递给默认渲染器进行绘制(this.getTooltipContent)