带隐藏条的 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

您不需要整个数据集，您可以更改工具提示内容以即时计算它（采用此处答案中找到的技术 -> ）

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)

http://jsfiddle.net/vz1rwvwn/

带隐藏条的 C3js 堆积条形图

C3js Stacked Bar Chart with a hidden bar

javascript

d3.js

c3.js