作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在值旁边添加符号 (%)。问题是当我连接符号 (%) 时,饼图未显示 数据:vm.distributed_per_day.map(item => (item.Amount/sum * 100).toFixed(2) + '%')
。如何将符号 (%) 添加到我的饼图中?有人可以帮我解决我的问题吗?这是我的代码
retrieveDistributedPerDayByPie : function() {
var self = this;
var sum = 0;
axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
.then(response => {
console.log(response);
vm.distributed_per_day = response.data
var ctxChart = self.$refs.myChart2.getContext('2d');
for(var i = 0; i < this.distributed_per_day.length; i++) {
sum += parseFloat(this.distributed_per_day[i].Amount);
}
var myChart2 = new Chart(ctxChart, {
type: 'pie',
data: {
labels: vm.distributed_per_day.map(item => item.Day),
datasets: [{
label: 'Total Amount',
data: vm.distributed_per_day.map(item => (item.Amount / sum * 100).toFixed(2) + '%'),
backgroundColor: this.poolColors(vm.distributed_per_day.length),
borderColor: '#eee',
borderWidth: 2
}]
},
reponsive : true,
options: {
title : {
display : true,
text : "Distributed Reports per Day",
fontFamily: "sans-serif",
fontSize: 18,
},
legend: {
display: false
},
tooltips: {
enabled: true
}
}
});
}).catch(e => {
console.log(e)
});
},
最佳答案
这适用于条形图,尚未在饼图上尝试过。希望它对你有用。
yAxes: [
{
ticks: {
callback: function (value, index, values) {
return value + " %";
}
}
}
]
关于vue.js - 如何在 ChartJS 中的数据上放置符号 (%)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57617563/
我是一名优秀的程序员,十分优秀!