Question

我正在使用Chart.js，这里是我想要发生的事情。 My Sample Graph

我需要在这些值上添加逗号来表示千位。例如：1,000

animation: {
    duration: 500,
    easing: "easeOutQuart",
    onComplete: function (label) {
        var ctx = this.chart.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        this.data.datasets.filter(dataset => !dataset._meta[Object.keys(dataset._meta)[0]].hidden).forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,                 
                    scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                                    ctx.fillStyle = '#000';
                var y_pos = model.y - 5;
                // Make sure data value does not get overflown and hidden
                // when the bar's value is too close to max value of scale
                // Note: The y value is reverse, it counts from top down
                if ((scale_max - model.y) / scale_max >= 0.70)
                   y_pos = model.y + 20; 
                ctx.fillText(dataset.data[i], model.x, y_pos);

            }
        });   

    }
}

这是显示这些值的代码，我相信附加这些逗号的代码应该在这段代码中。

我只是从这个论坛中获取此代码。所以我不确定发生了什么。 How to display Values above bars

Answer 1

您可以使用toLocaleString()来解决此类问题：

使用此链接toLocateString了解详情

Answer 2

使用此功能。

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

在下面的SO答案中找到。

SO Answer

<强>演示：

JSFiddle Demo

如何在此图表中添加逗号js

2 个答案: