沃梦达 / 编程问答 / 前端问题 / 正文

Chart.js 2.0 使用货币和千位分隔符格式化 Y 轴

沃梦达教程前端问题

2022-01-01 9

Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator(Chart.js 2.0 使用货币和千位分隔符格式化 Y 轴)

本文介绍了Chart.js 2.0 使用货币和千位分隔符格式化 Y 轴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在格式化图表轴时遇到问题，我找不到更新版本 2.0 的示例.

I am having problems with formatting my chart axis and I am not able to find an example for the updated version 2.0.

我怎样才能(例如)赚到 2000000 到 2.000.000 欧元?

How can I (for example) make 2000000 to €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
        }
    });
};

修复

在创建配置对象时将函数分配给 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;
        }
    }
}]

这篇关于Chart.js 2.0 使用货币和千位分隔符格式化 Y 轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！