Question

下面的代码渲染带有标签和适当值的charist图表我想将计算百分比附加到每个标签即

一个（5.55％）
两个（16.66％）
三（27.77％）

四（50.00％）

        c_labels= ["one","two","three","four"];
        c_series = [10,30,50,90];

        new Chartist.Pie(divid, {
            labels: c_labels,
            series: c_series,                    
        }, options);

Answer 1

您的代码有很多错误。它需要正确如下

var c_labels = ["one","two","three","four"];
var c_series = [5.55, 16.66, 27.77, 50];

var options = {
  width: 300,
  height: 200
};


new Chartist.Bar('divid', {
    labels: c_labels,
    series: [c_series]
}, options);

Answer 2

因此，您希望显示每个标签中的百分比。这只需要一个简单的字符串格式，我压缩。

您所做的是使用Array.reduce获取系列的总和。（我们称之为total ）

接下来，对于系列中的每个项目，将其除以total，然后乘以100.这样，您就可以获得每个系列在total上的百分比：

var c_labels = ["one", "two", "three", "four"],
  c_series = [10, 30, 50, 90],
  newLabels = [];

var total = c_series.reduce(function(a, b) {
  return a + b;
}, 0)

for (var i = 0; i < c_series.length; i++) {
  var percentage = ((c_series[i] / total) * 100).toFixed(2),
    newLabel = c_labels[i] + '(' + percentage + '%)'; //simple string concatenation
  //assign the new string to our new labels
  newLabels[i] = newLabel;
}

console.log(newLabels);

注意：使用toFixed会自动对数字进行舍入。你可以删除它，但我添加它，所以我们可以得到2小数精度。您也可以尝试toPrecision或combination。只需在网上找到样品，那里有很多，特别是SO。

还有一件事，

确保您的系列和标签具有相同的长度。

您可能需要检查c_labels[i] !== null || c_labels[i] !== undefined。

显示chartist标签中的计算百分比

2 个答案: