7

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

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

这里（https://gionkunz.github.io/chartist-js/examples.html）是饼图中百分比的示例。但这仅在我不添加标签时才有效。

向数据添加标签（例如标签：['Dog','Cat','Cow','Snake',],）会导致“NaN%”显示。

我想查看饼图本身的百分比，并将标签（用于图例）放入数据中。

这可能吗？

4

2 回答 2

13

您必须保留一个包含您的标签的数组，并使用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;
  }
});
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet"/>

<div class="ct-chart ct-perfect-fourth"></div>

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

于 2016-12-14T13:30:18.720 回答
0

您需要做的是自己制作标签。您需要生成一个字符串，如 [Labeltext] + ' | ' + [分享]

在我的例子中，我创建了一个变量来保存所有饼图元素的总和......称为 [graall]....

然后是这个计算份额的函数......

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

于 2016-05-12T13:40:42.347 回答