如何在图表中设置比例数字的格式.js v2

Question

首先，如果我的问题与其他问题略有相同，我深表歉意。我搜索了一个解决方案并找到了 3 个类似的问题，但没有一个在我的情况下有效，因为我找到的示例使用 Chart.js v1。

我看到一个示例，使用放置在 scaleLabel 中的函数来格式化数字，如下所示：

var options = {
    animation: false,
    scaleLabel: function(label){
        return  '$' + label.value.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
    }
};

但是，上面的代码在新图表.js v2 中不再有效。

如何在图表.js v2 中设置比例数字的格式？

这是我的代码：https://jsfiddle.net/2n7xc7j7/

Answer 1

添加选项配置时，需要确保将设置嵌套在正确的部分中。您可以通过将callback函数添加到yAxes刻度配置部分来格式化刻度数字：

options = {
    scales: {
        yAxes: [{
            ticks: {
                callback: function(value) {
                    return value.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
                }
            }
        }]
    }
};

JSFiddle 演示：https://jsfiddle.net/2n7xc7j7/1/

Answer 2

在 V3 中添加了 locale 属性。这使得刻度和工具提示上的所有数字都可以自动以该国家/地区代码的数字格式正确格式化：

// Element
const ctx = document.getElementById("myChart")
// Data
const data = {
  labels: ['First', 'Second', 'Third', 'Fourth'],
  datasets: [{
    label: 'Sample',
    data: [2982, 1039, 3200, 2300],
    backgroundColor: "rgba(90, 150, 220, 0.85)",
    borderColor: "rgba(70, 120, 180, 1)",
    borderWidth: 2
  }],
}
// Options
const options = {
  locale: 'en-US'
};
const chart_trans_hari = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>

Answer 3

我这样做了：

http://profwtelles.ddns.net/grafico2.html

    var canvas = document.getElementById('chart');
    new Chart(canvas, {
        type: 'line',
        data: {
            labels: ['1', '2', '3', '4', '5'],
            datasets: [{
                label: 'A',
                yAxisID: 'A',
                data: [100, 96, 84, 76, 69]
            }, {
                label: 'B',
                yAxisID: 'B',
                data: [1, 1, 1, 1, 0]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    id: 'A',
                    type: 'linear',
                    position: 'left',
                }, {
                    id: 'B',
                    type: 'linear',
                    position: 'right',
                    ticks: {
                        max: 1,
                        min: 0
                    }
                }]
            }
        }
    });

我希望对您有所帮助。此致敬意