Chart.js 向工具提示和 Y 轴添加逗号 [英] Chart.js Add Commas to Tooltip and Y-Axis

问题描述

我已经在 stackoverflow 中尝试了一些答案，但无济于事.我真的是 Chart.js 的新手，所以请耐心等待.

这是我迄今为止尝试过的.

解决方案

对于您的 yAxes 刻度选项，这将在千位标记处添加逗号:

刻度:{beginAtZero:true,用户回调:函数(值，索引，值){value = value.toString();value = value.split(/(?=(?:...)*$)/);value = value.join(',');返回值；}}

可以在工具提示回调中添加类似的功能.

此 FIDDLE

中的完整示例

I've tried some several answers here in stackoverflow but to no avail failed to make it work.. I'm really new in Chart.js so please bear with me.

this is what I have tried so far. Add Commas to ChartJS Data Points and this Chart.js number format

here's my code:

thanks in advance.

Chart.defaults.global.legend = {
 enabled: false
};

function load_yearly_sales_per_agent(param_year, transaction_url){
    $(".custom_loader").show();
    $(".custom_graph").hide();
    $.ajax({
        url:transaction_url,
        type:'post',
        data: {year : param_year},
        dataType:'json',
        success:function(result){
              // Bar chart
              var ctx = document.getElementById("mybarChart");
              var mybarChart = new Chart(ctx, {
                responsive: true,
                multiTooltipTemplate: "<%=addCommas(value)%>",
                type: 'bar',
                data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                  datasets: [{
                    label: 'Sales Per Month',
                    backgroundColor: "#26B99A",
                    data: result
                  }]
                },

                options: {
                  scales: {
                    yAxes: [{
                      ticks: {
                        beginAtZero: true
                      }
                    }]
                  }
                }
              });
              $(".custom_loader").hide();
              setTimeout(function(){
                $(".custom_graph").show();
              }, 200);
        }
    });
}

what I want is to add comma on tooltip and Y-axis.....

解决方案

For your yAxes ticks options, this will add commas at the thousands marks:

ticks: {
    beginAtZero:true,
    userCallback: function(value, index, values) {
        value = value.toString();
        value = value.split(/(?=(?:...)*$)/);
        value = value.join(',');
        return value;
    }
}

Similar function can be added in a tooltip callback.

Full example in this FIDDLE

这篇关于Chart.js 向工具提示和 Y 轴添加逗号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！