Javascript Chart.js在工具提示和Y轴中添加逗号

我在stackoverflow中尝试了几个答案，但都没有成功。。我是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);
        }
    });
}

Chart.defaults.global.legend={
已启用：false
};
函数加载每个代理的年销售额（参数年、事务url）{
$（“.custom_loader”）.show（）；
$（“.custom_图形”）.hide（）；
$.ajax({
url：事务的url，
类型：'post'，
数据：{year:param_year}，
数据类型：'json'，
成功：功能（结果）{
//条形图
var ctx=document.getElementById（“mybarChart”）；
var mybarChart=新图表（ctx{
回答：是的，
多工具模板：“，
类型：'bar'，
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[{
标签：“每月销售额”，
背景色：“26B99A”，
数据：结果
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
$（“.custom_loader”）.hide（）；
setTimeout（函数（）{
$（“.custom_graph”）.show（）；
}, 200);
}
});
}

我想在工具提示和Y轴上添加逗号

---

我在这里只是随便说说，但假设数据是一个数组，您就不能循环并添加逗号吗

datasets: [{
    label: 'Sales Per Month',
    backgroundColor: "#26B99A",
    data: result.map(function (i) {
       return i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    })
}]

---

对于yAxes ticks选项，这将在千分之一处添加逗号：

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

可以在工具提示回调中添加类似的函数

---

完整示例在此

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

45000.00将显示为45000.00

在chartjs 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;
                            }
                       }                            
                    }
                }]
            }
        }

---

对于每列只有一个数据集的图表（如条形图），接受的答案非常有效。硬编码数据集位置导致多数据集图表（如折线图）的解决方案失败。解决方案是将硬编码的数据集索引位置（data.datasets[0]）替换为内置于chartjs中的动态索引位置（data.datasets[tooltipItem.datasetIndex]）

通过根据用户的区域设置格式化值，可以最好地完成数字的格式化。这有助于确保数字使用正确的修饰符（根据用户的区域设置，千位分隔符可以是逗号或句点）

选项：{
工具提示：{
回调：{
标签：函数（工具提示项、数据）{
var tooltipValue=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]；
返回parseInt（tooltipValue）.toLocalString（）；
}
}
}
}

了解更多货币兑换

ticks: {
    beginAtZero: true,
    callback: function(label, index, labels) {
        return Intl.NumberFormat('hi', { style: 'currency', currency: 'INR', minimumFractionDigits: 2 }  )
        .format(label).replace(/^(\D+)/, '$1 ');
    },
}

// ₹ 1,400.00

---

有一个特定的javascript函数可以将长数字转换为根据系统设置格式化的数字：toLocaleString（）

您可以通过在勾选选项中添加“callback:”关键字，指定每个勾选（或由其编号索引标识的特定勾选）的标签必须由您自己的函数生成：

之前：

        ticks: {
                  max: maxAltitude,
                  min: 0
                }

之后：

        ticks: {
                  max: maxAltitude,
                  min: 0, // <--- dont' foget to add this comma if you already have specified ticks options
                    callback:  
                      function(value, index, valuesArray) {
                          // value: currently processed tick label
                          // index of currently processed tick label
                          // valuesArray: array containing all predefined labels
                          return  value.toLocaleString(); 
                      } // Function end
                } // Ticks options end

---

同样的方法也可以应用于工具提示。

我看到很多过于复杂的答案

此功能已通过

.toLocaleString（）

内置到javascript中，我们不必重新发明！这也解释了小数

yAxes: [
    {
        ticks: {
            beginAtZero: true,
            userCallback: function(value, index, values) {
                return value.toLocaleString();   // this is all we need
            }
        }
    }
]

（此示例显示金钱）

---

这是我对这个问题的第一个解决方案，但碰巧不起作用。。。。。我碰巧解决了这个问题。。。我能够找到工具提示，我只是在那里添加了一个添加逗号的函数…如果有小数点，则不起作用-请参阅本章的其他答案。我使用改进的数字格式设置程序（尽管

number（x）.toLocaleString（）

可能更好）和更现代的ES语法修改了完整示例：（旧的JSFIDLE版本呈现得很奇怪。）如果使用“var value=tooltipItem.yLabel；”而不是直接访问数据，那么工具提示回调效果会更好，因为有时数据是.x&.y或混合的。这里有多个数据集的修复方法：

var value=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]；

。（不要硬编码数据集索引为0。）这非常有效。谢谢。这是一个非常简单的解决方案！谢谢

yAxes: [
    {
        ticks: {
            beginAtZero: true,
            userCallback: function(value, index, values) {
                return value.toLocaleString();   // this is all we need
            }
        }
    }
]

callback: function(value, index, values){
               return value.toLocaleString("en-US",
              {style:"currency", 
                currency:"USD",
                minimumFractionDigits: 0, 
                maximumFractionDigits: 0});
           }