Question

我正在堆叠并需要帮助，我使用图表js来创建图表，但我希望标签AS WELL AS数据以货币格式显示。

e.g。标签中的120000应为120,000美元（Y轴）以及当您悬停以便以货币格式显示时的实际数据。

谢谢你！

Answer 1

您可以使用tooltipTemplate选项格式化工具提示内容，scaleLabel可以在创建图表时设置比例值（或在全局级别设置），以便按照您喜欢的方式对其进行格式化< / p>

...
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
scaleLabel: "<%=value%>",
...

如果你的格式更复杂，你甚至可以使用一个功能，如

var myChart = new Chart(ctx).Line(data, {
    scaleLabel: function (valueObject) {
        return '$' + valueObject.value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    tooltipTemplate: function (valueObject) {
        return valueObject.label + ': $' + valueObject.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
});

格式位来自How to print a number with commas as thousands separators in JavaScript

小提琴 - http://jsfiddle.net/v8w6f0bx/

Answer 2

您还可以在调用新的Chart（）时设置这些选项。

options.scales.yAxes.ticks
options.tooltips.callbacks.label

这样：

new Chart(document.getElementById("mybarChart"), {
        type: "bar",
        data: data,
        options: {
            scales: {
                yAxes: [{
                        ticks: {
                            beginAtZero: !0,
                            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(/(?=(?:...)*$)/);

function showElement(id){
  $('#'+id).show()
}

`

如何在Chart js中显示货币

2 个答案: