2

我有这段代码可以将数据添加到图表中：

datasets: [
    {
        data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
        . . .

我希望它被逗号化，以便“2755”显示为“2,755”等。所以我尝试了这个::

datasets: [
    {
        data: [addCommas(2755), addCommas(2256), addCommas(1637), addCommas(1608), addCommas(1603), addCommas(1433), addCommas(1207), addCommas(1076), addCommas(1056), addCommas(1048)],
        . . .

function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

...但这几乎完全抹去了我的馅饼；馅饼本身是不可见的，尽管我添加的图例是可见的，尽管被破坏了。

这失败了，效果完全相同：

data: ["2,755", "2,256", "1,637", "1,608", "1,603", "1,433", "1,207", "1,076", "1,056", "1,048"],

由于数据嵌入在画布中，我认为我不能应用一些简单的通用解决方案，但如果有，那就太好了；否则，有什么方法可以完成这种数值的逗号化？

更新

我想尝试 felipeptcho 的答案，但我不知道将该代码放在我所拥有的确切位置，即：

var formatter = new Intl.NumberFormat("en-US");
var data = {
    labels: [
        "Bananas (18%)",
        "Lettuce, Romaine (14%)",
        "Melons, Watermelon (10%)",
        "Pineapple (10%)",
        "Berries (10%)",
        "Lettuce, Spring Mix (9%)",
        "Broccoli (8%)",
        "Melons, Honeydew (7%)",
        "Grapes (7%)",
        "Melons, Cantaloupe (7%)"
    ],
    datasets: [
        {
            data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
            backgroundColor: [
                "#FFE135",
                "#3B5323",
                "#fc6c85",
                "#ffec89",
                "#021c3d",
                "#3B5323",
                "#046b00",
                "#cef45a",
                "#421C52",
                "#FEA620"
            ]
        }]
};

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());

更新 2

它仍然无法正常工作；这是添加该代码后的样子：

在此处输入图像描述

这是没有新代码时的样子，悬停在香蕉上（显示“2755”，我想是“2,755”）：

在此处输入图像描述

简单地注释掉这个：

data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

...将其恢复为以前的外观，但我仍然没有逗号化的值，当然。

这是我打破馅饼的代码（当上面的代码没有被注释掉时）：

var formatter = new Intl.NumberFormat("en-US");
var data = {
    labels: [
        "Bananas (18%)",
        "Lettuce, Romaine (14%)",
        "Melons, Watermelon (10%)",
        "Pineapple (10%)",
        "Berries (10%)",
        "Lettuce, Spring Mix (9%)",
        "Broccoli (8%)",
        "Melons, Honeydew (7%)",
        "Grapes (7%)",
        "Melons, Cantaloupe (7%)"
    ],
    datasets: [
        {
            data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
            backgroundColor: [
                "#FFE135",
                "#3B5323",
                "#fc6c85",
                "#ffec89",
                "#021c3d",
                "#3B5323",
                "#046b00",
                "#cef45a",
                "#421C52",
                "#FEA620"
            ]
        }
    ]
};
data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());

更新 3

等一下——我更新了上面的最后一张截图，没有真正注意它的外观，它已经被修复了。正如felipeptcho所提到的，它所要做的就是添加这一行：

var formatter = new Intl.NumberFormat("en-US");

没有它，值不包含逗号；有了它，他们就可以了——不需要其他任何东西！

4

3 回答 3

2 
var formatter = new Intl.NumberFormat();
var data = {labels: ["..."], datasets: [{data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048], backgroundColor: ["..."]}]};

data.datasets.forEach(function (dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

// Output: {"labels":["..."],"datasets":[{"data":["2,755","2,256","1,637","1,608","1,603","1,433","1,207","1,076","1,056","1,048"],"backgroundColor":["..."]}]}
console.log(data);

另一种方法是实现标签回调：

...

var formatter = new Intl.NumberFormat();

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true,
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return data.labels[tooltipItem.index] + ": " +
                    formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
            }
        }
    }
};

...

var top10PieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: optionsPie
});

...
于 2016-09-21T16:49:08.477 回答
1

尝试这样的事情 -

datasets: [
{
    labels: [addCommas(2755), addCommas(2256), addCommas(1637), addCommas(1608)],
    data: [2755, 2256, 1637, 1608],
    . . .
于 2016-09-21T16:30:14.517 回答
1

真正需要的只是 felipeptcho 代码的第一行，即：

var formatter = new Intl.NumberFormat("en-US");

...然后在此之后的某个地方：

data.datasets.forEach(function(dataset) {
    dataset.data = dataset.data.map(formatter.format);
});

即使我在为不同图表声明数据集和数据的其他代码块之后拥有最后一个代码，它也适用于正在讨论的图表/数据。

就这样！它很简单。怎么样，我不太明白，但确实如此，所以我很满意。

于 2016-09-21T17:48:12.670 回答