格式Chart.JS數據元素是貨幣

Question

我發現您可以通過快速JavaScript回調函數將Chart.JS的x或y軸格式化為貨幣

callback: function(value, index, values) {
    if (parseInt(value) >= 1000) {
        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    } else {
        return '$' + value;
    }
}
}

但這似乎不是data:的情況data:在我的實例中，這是一個包含數值的JavaScript 1D數組，我想在適用的地方添加美元符號和逗號。 如何使用Charts.jS添加它

編輯
這就是我填充我的JSON數組的方式 - 我想格式化數據中的data: values

var barChartData = {
    labels: labelsarr,
    datasets: [{
        label: 'Amount',
        backgroundColor: 'rgba(200, 200, 200, 0.75)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1,
        data: values
    }]

};

並且JSON數組采用這種格式["AAAA",100,10000,2310,24420,30,50000,400000,70000,700,823200,923200,1111]

我想從index[1]開始格式化以顯示$和貨幣。 怎么能實現這一目標？

第二次編輯時間
我嘗試使用以下語法添加標題並將數據點和左軸格式化為貨幣，但這不再在我的頁面上顯示任何內容。

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelsarr,
        datasets: [{
            label: 'Test',
            data: values,
            backgroundColor: 'rgba(0, 119, 204, 0.8)',
        }]
    },
    options: {
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function(value, index, values) {
                        if (parseInt(value) >= 1000) {
                            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        } else {
                            return '$' + value;
                        }
                    }
                }
            }]
        },
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: '<?php echo $name ?> Test'
        }
        tooltips: {
            callbacks: {
                label: function(t, d) {
                    var xLabel = d.datasets[t.datasetIndex].label;
                    var yLabel = t.yLabel >= 1000 ?
                        '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") :
                        '$' + t.yLabel;
                    return xLabel + ': ' + yLabel;
                }
            }
        }
    }
});

Answer 1

這可以使用以下工具提示標簽回調函數來實現...

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
         return xLabel + ': ' + yLabel;
      }
   }
}

---

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ

 var labelsarr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M']; var values = ["AAAA", 100, 10000, 2310, 24420, 30, 50000, 400000, 70000, 700, 823200, 923200, 1111]; var ctx = document.getElementById('canvas').getContext('2d'); var chart = new Chart(ctx, { type: 'bar', data: { labels: labelsarr, datasets: [{ label: 'Amount', data: values, backgroundColor: 'rgba(0, 119, 204, 0.8)', }] }, options: { tooltips: { callbacks: { label: function(t, d) { var xLabel = d.datasets[t.datasetIndex].label; var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",") : '$' + t.yLabel; return xLabel + ': ' + yLabel; } } }, scales: { yAxes: [{ ticks: { callback: function(value, index, values) { if (parseInt(value) >= 1000) { return '$' + value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } else { return '$' + value; } } } }] } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="canvas"></canvas>