chartist.js 饼图，饼图上带有标签和百分比

Question

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

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

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

向数据添加标签(例如标签:['Dog','Cat','Cow','Snake',],)会显示“NaN%”。

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

这可能吗？

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

<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在您的数据数组中(仅限系列)，否则为 labelInterpolationFnc 中的 value 参数将填充标签而不是值，因此我们无法计算百分比。