Question

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

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

＆＃13;

		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;
						}
					}
				}
			});
		}

＆＃13;

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();

c3.js饼图标题总数

1 个答案: