图表.js向工具提示和 Y 轴添加逗号
我在stackoverflow中尝试了几个答案，但都没有成功..我真的是Chart.js的新手，所以请多包涵。
这就是我到目前为止尝试过的。将逗号添加到图表JS数据点和此图表.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轴上添加逗号.....
共有3个答案
如果使用小数，公认的答案不会将逗号放在正确的位置
45000.00将显示为45000，.00
对chart js 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;
}
}
}
}]
}
}
对此我看到了很多过于复杂的答案。
这个功能已经内置在javascript的< code >中。toLocaleString()，我们不必重新发明轮子！这也解释了小数。
yAxes: [
{
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return value.toLocaleString(); // this is all we need
}
}
}
]
对于您的y轴刻度选项，这将在千位标记处添加逗号:
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(',');
return value;
}
}
可以在工具提示回调中添加类似的函数。
这个小提琴的完整例子
-
问题内容： 我只想在JTextPane中的某些文本上添加一些工具提示。例如，如果JTextPane中有参考链接文本，我想在该文本中添加工具提示以显示链接。有什么办法可以实现此功能？ 问题答案： 好问题。 First Swing支持HTML，因此要显示带有链接的工具提示，您只需说： 问题是使此工具提示可单击。 不幸的是，它不是由Swing本身完成的。 工具提示由ToolTipManager创建。当您
-
我有一系列svg矩形（使用D3.js)，我想在mouseover上显示一条消息，该消息应该被一个充当背景的框包围。它们应该彼此完全对齐，并与矩形（在顶部和居中）完全对齐。做这件事最好的方法是什么？ 我尝试使用“x”、“y”、“width”和“height”属性添加一个svg文本，然后预置一个svg rect。问题是文本的参考点在中间（因为我希望它居中对齐，所以我使用了)，但对于矩形，它是左上的坐标
-
问题内容： 如何在JTable的行中添加工具提示（Java Swing）？这些工具提示应包含相对行的相同值。 这是我在扩展JTable的类中使用的代码。它覆盖了方法“ prepareRenderer”，但是我得到了空单元格，并且为行中的每个单元格添加了一个工具提示，而不是整个行的一个工具提示（这就是我想要的）： 问题答案： 它为行中的每个单元格添加了一个工具提示，而不是整个行中的一个工具提示 您正
-
我想在我的模型中使用“reason”属性为添加一个工具提示。我该怎么做？
-
我在我的php站点中使用fullcalendar。我用eventSources加载事件，给它一个url重定向到我的php控制器，该控制器生成json数据。在呈现日历之前，我希望每个事件都有工具提示。为此，我编写了一个javascript函数，用于添加工具提示： 其中内容是html内容。该函数在日历渲染之后运行。呈现日历后，工具提示不显示。 为了解决这个问题，我尝试将该函数添加到datesRende
-
问题内容： 我有这样的div标签： 如何在div 上显示工具提示，最好具有淡入/淡出效果。 问题答案： 对于基本工具提示，您需要： 对于更高级的javascript版本，您可以查看以下内容： https://jqueryhouse.com/best-jquery-tooltip- plugins/ 上面的链接为您提供了25个工具提示选项。