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

您需要做的就是自己制作标签。您需要生成类似 [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
  
  };

Answer 2

您必须保留一个包含您的标签的数组，并使用带有两个参数的 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（只能是series），否则labelInterpolationFnc中的value参数会填入label而不是value，所以我们无法计算百分比。

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

chartist.js pie chart with labels AND percentage on the pie

chartist.js