英文:
how to format label on PolarArea chart.js vue-chartjs
问题
plugins: {
// 尝试了一个插件，没有成功...
labels: {
type: "percentage",
render: "percentage",
fontColor: ["green", "white", "red"],
precision: 2,
},
},
// 尝试了这个额外的部分，没有成功
tooltips: {
callbacks: {
label: function (tooltipItem: any) {
return tooltipItem.rLabel.toFixed(0);
},
},
},
scales: {
r: {
ticks: {
// 在 Line 图表中完全正常，但在这里不起作用
callback: (value: number) => `${(value * 100).toFixed()}%`,
format: {
style: "percent",
},
},
},
},
英文:
I've got vue chartjs setup and I want to format label/show 95.7% instead of raw 0.957 as in the screenshot. Same setup I try here works for Line chart, but can't make it work in PolarArea.
"chart.js": "^4.3.0",
"vue-chartjs": "^5.2.0",
polarOptions() {
return {
plugins: {
// tried a plugin, no luck..
labels: {
type: "percentage",
render: "percentage",
fontColor: ["green", "white", "red"],
precision: 2,
},
},
// tried this extra, no luck
tooltips: {
callbacks: {
label: function (tooltipItem: any) {
return tooltipItem.rLabel.toFixed(0);
},
},
},
scales: {
r: {
ticks: {
// exactly this works just fine on Line chart, but not here
callback: (value: number) => `${(value * 100).toFixed()}%`,
format: {
style: "percent",
},
},
},
},
};
},
答案1
得分: 0
plugins.tooltip.callbacks.label 似乎完成了任务。
我不喜欢它的外观，所以很高兴看到是否有更顺畅的方法来完成它。
英文:
So plugins.tooltip.callbacks.label seems to do the job.
I don't like the way it looks, so happy to see if there's smoother way to do it
polarOptions() {
return {
plugins: {
tooltip: {
callbacks: {
label(context: any) {
const value = (context.raw * 100).toFixed(1);
return `${context.dataset.label}: ${value}%`;
},
},
},
},
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论