当前位置:  开发笔记 > 编程语言 > 正文

Chart.js将逗号添加到工具提示和Y轴

如何解决《Chart.js将逗号添加到工具提示和Y轴》经验,为你挑选了2个好方法。

我已经在stackoverflow中尝试了几个答案,但无济于事使它无法工作..我是Chart.js的新手,所以请耐心等待.

这是我到目前为止所尝试的. 将逗号添加到ChartJS数据点和此Chart.js数字格式

这是我的代码:

提前致谢.

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);
        }
    });
}

我想要的是在工具提示和Y轴上添加逗号.....

在此输入图像描述



1> dangre00..:

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

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

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

这个FIDDLE中的完整示例



2> Jay Rizzi..:

如果使用小数,则接受的答案不会将逗号放在正确的位置

45000.00将显示为45,000,.00

使用以下代码为chartjs ver 2.3

       options: {
            responsive: true,
            maintainAspectRatio: false,
        tooltips: {
          callbacks: {
                label: function(tooltipItem, data) {
                    var value = data.datasets[0].data[tooltipItem.index];
                    if(parseInt(value) >= 1000){
                               return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                               return '$' + value;
                            }
                }
          } // end callbacks:
        }, //end tooltips                
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        callback: function(value, index, values) {
                            if(parseInt(value) >= 1000){
                               return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                               return '$' + value;
                            }
                       }                            
                    }
                }]
            }
        }


这是针对多个数据集的解决方法:`var value = data.datasets [tooltipItem.datasetIndex] .data [tooltipItem.index];`。(不要将数据集索引硬编码为0。)
推荐阅读
虎仔球妈_459
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有