sum - 饼图标题中的 c3.js 总数

Question

我对 c3.js 中的饼图有疑问。

如何在标题中添加饼图的总数？

		var title = new Array('data1.sql','data2.sql')
		var dtitle = new Array('title1','title2')
		var chart = new Array('chart0', 'chart1')
		for(var i = 0; i < title.length; i++){
				chart[i] = c3.generate({
				bindto : '#chart' + i,
				size: {
			        height: 550,
			        width: 800
			    },
				data : {
					url : '/json/sql/data/test/' + title[i],
					mimeType : 'json',
					type : 'donut'
				},
				donut: {
					title: dtitle[i] + ' - Total:' ,
					label: {
						format: function(value, ratio, id) {
							return value;
						}
					}
				}
			});
		}

Answer 1

这里令人讨厌的事情是 title 选项可以接受一个函数，但图表变量未在其中初始化，因此此时无法使用 c3 api 方法。

所以最好的(也许是唯一的)方法是添加一个 onrendered 回调来添加你需要的数据，然后使用 d3 点替换图表标题文本中的文本:

onrendered: function () {
    var data = this.api.data();
    var total = data.reduce (function (subtotal, t) {
        return subtotal + t.values.reduce (function (subsubtotal,b) { return subsubtotal + b.value; }, 0);
    }, 0);
    d3.select(this.config.bindto + " .c3-chart-arcs-title").text("Total: "+total);
}

编辑:如果您希望它在隐藏/显示系列时跟踪总数，请使用此

var data = this.api.data.shown.call (this.api);

代替

var data = this.api.data();