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

问题描述

我在格式化图表轴时遇到了问题，我无法找到更新版本2.0的示例。

我如何（例如） 2000000 to€2,000,000？

我的小提琴： https://jsfiddle.net/Hiuxing/4sLxyfya/4/

  window.onload = function（ ）{
 var ctx = document.getElementById（canvas）。getContext（2d）; 
 window.myBar =新图表（ctx，{
 type：'bar'，
 data：barChartData，
 options：{
 title：{
显示：真，
文字：图
}，
图例：{
位置：bottom
}，
工具提示：{
模式：'label'，
 bodySpacing：10，
 cornerRadius：0，
 titleMarginBottom：15 
}，
比例：{
 xAxes： [{
 ticks：{} 
}]，
 yAxes：[{
 ticks：{
 beginAtZero：true，
 stepSize：500000 
} 
}] 
}，
响应：真
} 
}）; 
}; 
  

解决方案

修正

创建配置对象时，将一个函数分配给userCallback。这在创建刻度标记时被调用。您可以在 Scales文档底部的Chart.js 找到相关文档。

示例小提琴

  yAxes：[{
 ticks：{
 beginAtZero：true，
 stepSize：500000，
 
 //返回一个空字符串来绘制刻度线，但隐藏刻度标签
 //返回null或undefined来隐藏刻度线
 userCallback：function（value，index，values ）{
 //将数字转换为一个字符串，并从结尾中每3个字符串分割一次字符串
 value = value.toString（）; 
 value = value.split（/(?=(?:...)*$)/）; 
 
 //将数组转换为字符串并格式化输出
 value = value.join（'。'）; 
返回'€'+值; 
} 
} 
}] 
  

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

How can I (for example) make 2000000 to €2.000.000?

My fiddle: 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
        }
    });
};

解决方案

The Fix

Assign a function into userCallback when creating the config object. This gets called when creating the tick marks. You can find documentation at Chart.js at the bottom of Scales Documentation

Example fiddle with the fix

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轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！