web-dev-qa-db-ja.com

Chart.js 2.0通貨と数千のセパレータを使用したY軸のフォーマット

グラフの軸の書式設定に問題があり、更新されたバージョン2.0の例を見つけることができません。

（たとえば）2000000から€2.000.000にするにはどうすればよいですか？

私のフィドル： https://jsfiddle.net/Hiuxing/4sLxyfya/4/

window.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            title: {
                display:true,
                text:"Figure"
            },
            legend: {
                position: "bottom"
            },
            tooltips: {
                mode: 'label',
                bodySpacing: 10,
                cornerRadius: 0,
                titleMarginBottom: 15
            },
            scales: {
                xAxes: [{
                    ticks: {}
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        stepSize: 500000
                    }
                }]
            },
            responsive: true
        }
    });
};
javascriptjquerychartsformatchart.js
11
Mae

修正

構成オブジェクトの作成時に関数をuserCallbackに割り当てます。これは、目盛りを作成するときに呼び出されます。ドキュメンテーションは Scalesドキュメンテーションの下部にあるChart.js にあります。

修正を加えたフィドルの例

yAxes: [{
    ticks: {
        beginAtZero: true,
        stepSize: 500000,

        // Return an empty string to draw the tick line but hide the tick label
        // Return `null` or `undefined` to hide the tick line entirely
        userCallback: function(value, index, values) {
            // Convert the number to a string and splite the string every 3 charaters from the end
            value = value.toString();
            value = value.split(/(?=(?:...)*$)/);

            // Convert the array to a string and format the output
            value = value.join('.');
            return '€' + value;
        }
    }
}]
28
L Bahr

バージョン：2.5.0を使用している人のために、ここに機能拡張があります。これにより、「yAxes」の「ティック」だけでなく、チャートのツールチップで金額をフォーマットすることもできます

...
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                callback: function(value, index, values) {
                    return '$ ' + number_format(value);
                }
            }
        }]
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, chart){
                var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                return datasetLabel + ': $ ' + number_format(tooltipItem.yLabel, 2);
            }
        }
    }
}

ここに私が使用しているnumber_format（）関数があります：

function number_format(number, decimals, dec_point, thousands_sep) {
// *     example: number_format(1234.56, 2, ',', ' ');
// *     return: '1 234,56'
    number = (number + '').replace(',', '').replace(' ', '');
    var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };
    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}
4
herohat

代わりに新しい関数を使用すると、ネイティブのJavaScript NumberFormatを使用できます

        yAxes: [{
      ticks: {
        beginAtZero: true,
        callback: function(value, index, values) {
                return '€ ' + Intl.NumberFormat().format((value/1000)) + 'K';
            }
      }
    }]
        //2000000 => € 2,000K
1
Marcelo Lujan