javascript - Chartist 的饼图标签放错位置，我无法调试它

Question

我正在尝试使用从某个 php 页面获取的 Json 数据来制作图表。

具体来说，我想显示一个饼图，其中包含每个部分的标签及其代表的百分比。

我遵循了图表专家的示例，最终得到了这个代码笔:

https://codepen.io/orsucciu/pen/qBdrjow

标签太小、位置错误，并且百分比不显示!

我检查了调试控制台，但没有任何异常。

我还在我的 LabelInterpolation 中添加了一个 console.log 来查看，但它没有发送任何内容......所以我怀疑它来自那里，但我不知道到底是什么问题: (

谢谢!

Answer 1

https://codepen.io/SkyDieRay/pen/BaNWdmr

data = JSON.parse('{"orphans":17,"0":4,"1":7,"3":1,"aTraiter":2,"aValider":3,"Valided":4,"retourBO":5}');

我玩了一下，你的错误值显示在那里，因为图表中的数据为 0%，因此为什么所有这些都在同一个地方。
我更改了数据以赋予它们值，现在看起来很正常。

为了显示百分比，我将其添加到responsiveOptions中。
另外，将 value 替换为 dat.series[index]。那里的值(value)只是数据的键，而不是值。所以你大部分时间都在潜水字符串，这就是你得到 NaN% 结果的原因。

labelInterpolationFnc: function(value, index) {
  var percentage = Math.round(dat.series[index] / dat.series.reduce(sum) * 100) + '%';
  return dat.labels[index] + ' ' + percentage;
}