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

但这似乎不是数据的情况: 在我的实例中，这是一个保存数值的 JavaScript 一维数组，我想在适用的地方添加一个美元符号和逗号.如何使用 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>