Question

我想创建一个饼图，其中chartist.js带有标签（显示在图例中），还有饼图本身的百分比。

这是饼图。我想为这些碎片添加百分比值。 http://i.stack.imgur.com/SiIKb.png

此处（https://gionkunz.github.io/chartist-js/examples.html）是饼图中百分比的示例。但这只适用于我不添加标签的情况。

为数据添加标签（例如标签：[＆＃39; Dog＆＃39;，＆＃39; Cat＆＃39;，＆＃39; Cow＆＃39;＆＃39; Snake＆＃39;，] ，）导致＆＃34; NaN％＆＃34;显示。

我希望看到饼图本身的百分比，并将标签（图例）放入数据中。

这可能吗？

Answer 1

您必须保留包含标签的数组，并使用带有两个参数的labelInterpolationFnc获取索引，并使用它来获取具有百分比的正确标签：

var animals = ['Dog','Cat','Cow','Snake'];

var data = {
  series: [5, 3, 4]
};

var sum = function(a, b) { return a + b };

new Chartist.Pie('.ct-chart', data, {
  labelInterpolationFnc: function(value, idx) {
    var percentage = Math.round(value / data.series.reduce(sum) * 100) + '%';
    return animals[idx] + ' ' + percentage;
  }
});

请注意，我们不得在您的数据数组中使用labels（仅限系列），否则labelInterpolationFnc中的值参数将使用标签而不是值填充，因此我们无法＆＃ 39; t计算百分比。

Answer 2

您需要做的就是自己制作标签。您需要生成类似[Labeltext] +'|的字符串'+ [分享]

在我的情况下，我创建了一个变量，它保存了所有饼图元素的总和...称为[griall] ....

然后有这个函数来计算份额......

		function calcProz(value, griall) {
			return Math.round(value / griall * 100) + '%';
		};

稍后当我生成包含标签的数组时，我使用此函数将百分比添加到文本中...

		chartlabels[i]=dbresult[i].use + ' | ' + calcProz(dbresult[i].gri,griall);

其中dbresult [i] .use是初始标签文本，dbresult [i] .gri是进入图表的值（都来自数据库）

毕竟在定义图表时，您只需添加标签......

var data = {
				series: chartdata,
		//		series: [25,16,15, 14, 4,2,1]
				labels: chartlabels
		
		};

chartist.js饼图与饼干上的标签和百分比

2 个答案: