向数据值图表添加小数点
Adding decimal points to data values chartJS
这告诉我如何将数据值添加到图表 JS - 将数据值添加到图表 JS
现在我想为这些值添加逗号,例如 5,000 6,000 而不是 5000 6000
JSFiddle for data values code
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
});
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});
不幸的是,JavaScript 中没有内置的跨浏览器解决方案来回答这个答案:
如何在 JavaScript 中打印带有逗号的数字作为千位分隔符
您可以使用包含在小提琴中的numbersWithCommas
:
var numberWithCommas = function(x) {
return x
.toString()
.replace(/'B(?=('d{3})+(?!'d))/g, ",");
};
只需在this.datasets.forEach
函数中包含bar.value = numberWithCommas(bar.value);
这将在将数字附加到图表之前用逗号格式化数字。
相关文章:
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何添加浮动和非浮动,其他
- 如何将字符串中的小数点添加到数值中
- Javascript拆分整数并添加小数点
- 向数据值图表添加小数点
- 在输入中输入的小数点前添加 0
- 更改为在小数点后添加 2 位数字
- 添加字符功能需要在小数点前加0
- 在asp.net文本框中键入时自动添加一个点(.)(将文本框格式设置为小数点后两位)
- 添加小数点- Javascript
- 添加小数点
- 仅当数字小于小数点后两位时添加.00 (toFixed)
- 如何在Javascript Rows,Cols中添加小数点.Vars
- 我正在尝试将数字转换为货币,并添加带有2个小数点的数字