ChartJS 版本 3 如何向饼图工具提示添加百分比 [英] ChartJS version 3 how to add percentage to pie chart tooltip
问题描述
我正在尝试在 ChartJS 3.2.1 中向饼图添加百分比
<块引用>我从广泛的搜索参考 ChartJS 版本 1 或 2 中找到的所有答案和代码.
包括这个问题和这个问题和这个问题全部失败或实际上并没有改变任何工具提示显示.
对 https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0 的引用很多，但这不适用于 ChartJS v3；我已经从这里安装了第 3 版的 ChartJS 数据标签:
https://github.com/chartjs/chartjs-plugin-datalabels/releases/tag/v2.0.0
但使用 此答案 仍然不起作用.
我在 ChartJS Datalabels Plugin 文档上看不到如何实现我正在寻找的东西.
我正在寻找要在工具提示悬停或饼图本身上显示的每块饼的百分比，而不是在标签/图例上.
我在 ChartJS 工具提示文档上看不到任何内容关于如何实际编辑工具提示的文本内容.
所以，我的代码:
JS:
var dnct1 = document.getElementById('DoeNut1');var myChart1 = new Chart(dnct1, {类型:'甜甜圈'，数据: {标签:[苏格兰和北爱尔兰"、英格兰东北部"、西北"、中部地区"、东安格利亚"、南英格兰"]、数据集:[{标签:[苏格兰和北爱尔兰"，英格兰东北部"，西北"，中部地区"，东安格利亚"，南英格兰"]，数据:[510"、887"、720"、837"、993"、774"、977"]、边框宽度:0，悬停偏移:5，背景颜色:['#F3AC16','#9F9F9F','#FF3355','#55EE22','#354D73','#553FCF'],抠图:0}]},选项: {工具提示:{启用:真，},布局: {填充:{底部:25}},插件:{/** 从上面链接的问题中导入.显然适用于 ChartJS V2 **/数据标签:{格式化程序:(值，dnct1)=>{让总和 = 0;让 dataArr = dnct1.chart.data.datasets[0].data;数据Arr.map(数据=> {总和 += 数据；});让百分比 = (value*100/sum).toFixed(2)+'%';回报率；},颜色:'#ff3'}}}});HTML:
返回上述无浏览器控制台错误，所有图表均正确显示，但工具提示未显示任何百分比.我看不出有什么问题.
解决方案 要使用 datalabels 插件，您还需要注册它，请阅读迁移指南 (https://www.chartjs.org/docs/master/getting-started/v3-migration.html) 首先因为您正在为工具提示使用 v2 语法，例如这不起作用.
要获取工具提示中的百分比，您可以使用任何回调 (https://www.chartjs.org/docs/master/configuration/tooltip.html#tooltip-callbacks)请参阅下面的示例，了解数据标签和页脚回调以显示百分比:
var dnct1 = document.getElementById('DoeNut1');var myChart1 = new Chart(dnct1, {类型:'甜甜圈'，数据: {标签:[苏格兰和北爱尔兰"、英格兰东北部"、英格兰西北部"、北威尔士和西米德兰兹"、东米德兰兹和东安格利亚"、南威尔士和英格兰西南部"、东南英国"]，数据集:[{标签:[苏格兰和北爱尔兰"、英格兰东北部"、英格兰西北部"、北威尔士和西米德兰兹"、东米德兰兹和东安格利亚"、南威尔士和英格兰西南部"、东南英国"]，数据:[510"，887"，720"，837"，993"，774"，977"]，边框宽度:0，悬停偏移:5，背景颜色:['#F3AC16'，'#9F9F9F'，'#FF3355'，'#55EE22'，'#354D73'，'#666633'，'#553FCF']，抠图:0}]},选项: {布局: {填充:{底部:25}},插件:{工具提示:{启用:真，回调:{页脚:(ttItem)=>{让总和 = 0;让 dataArr = ttItem[0].dataset.data;数据Arr.map(数据=> {总和 += 数字(数据)；});让百分比 = (ttItem[0].parsed * 100/sum).toFixed(2) + '%';返回`数据百分比:${percentage}`；}}},/** 从上面链接的问题中导入.显然适用于 ChartJS V2 **/数据标签:{格式化程序:(值，dnct1)=>{让总和 = 0;让 dataArr = dnct1.chart.data.datasets[0].data;数据Arr.map(数据=> {总和 += 数字(数据)；});让百分比 = (值 * 100/总和).toFixed(2) + '%';回报率；},颜色:'#ff3',}}},插件:[ChartDataLabels]});
<body><canvas id="DoeNut1" width="600" height="400"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.js" ></script></body>
I am trying to add percentage to pie chart in ChartJS 3.2.1
All the answers and code I have found from extensive searching reference ChartJS version 1 or 2.
Including This question and This question and this question which all fail or do not actually change any tooltip display.
There is numerous reference to https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0 but this doesn't work on ChartJS v3; I have installed the ChartJS Datalabels for Version 3 from here:
https://github.com/chartjs/chartjs-plugin-datalabels/releases/tag/v2.0.0
but using This answer still does not work.
I can not see on the ChartJS Datalabels Plugin documentation how to implement what I'm looking for.
I am looking for the percentage for each piece of the pie to be shown on the tooltip hover OR on the pie piece itself, but not on the label/legend.
I can't see anything on the ChartJS Tooltip documentation about how to actually edit the textual content of the tooltip.
So, my code:
JS:
var dnct1 = document.getElementById('DoeNut1');
var myChart1 = new Chart(dnct1, {
type: 'doughnut',
data: {
labels: ["Scotland and Northern Ireland","North East England","North West","Midlands","East Anglia","South England"],
datasets: [{
label: ["Scotland and Northern Ireland","North East England","North West","Midlands","East Anglia","South England"],
data: ["510","887","720","837","993","774","977"],
borderWidth: 0,
hoverOffset: 5,
backgroundColor: ['#F3AC16','#9F9F9F','#FF3355', '#55EE22','#354D73','#553FCF'],
cutout: 0
}]
},
options: {
tooltips: {
enabled: true,
},
layout: {
padding: {
bottom: 25
}
},
plugins: {
/** Imported from a question linked above.
Apparently Works for ChartJS V2 **/
datalabels: {
formatter: (value, dnct1) => {
let sum = 0;
let dataArr = dnct1.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value*100 / sum).toFixed(2)+'%';
return percentage;
},
color: '#ff3'
}
}
}
});
HTML:
<div class='chartBox'>
<h2>Title</h2>
<canvas id='DoeNut1'></canvas>
</div>
The above no browser console errors are returned and all charts display correctly but the tooltips don't show any percentages. I can't see what's wrong.
解决方案 To use the datalabels plugin you will need to register it also please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html) first because you are using v2 syntax for your tooltip for example which wont work.
To get the percentage in the tooltip you can use any of the callbacks (https://www.chartjs.org/docs/master/configuration/tooltip.html#tooltip-callbacks) see example below for datalabels and the footer callback to display the percentages:
var dnct1 = document.getElementById('DoeNut1');
var myChart1 = new Chart(dnct1, {
type: 'doughnut',
data: {
labels: ["Scotland and Northern Ireland", "North East England", "North West England", "North Wales and West Midlands", "East Midlands and East Anglia", "South Wales and South West England", "South East England"],
datasets: [{
label: ["Scotland and Northern Ireland", "North East England", "North West England", "North Wales and West Midlands", "East Midlands and East Anglia", "South Wales and South West England", "South East England"],
data: ["510", "887", "720", "837", "993", "774", "977"],
borderWidth: 0,
hoverOffset: 5,
backgroundColor: ['#F3AC16', '#9F9F9F', '#FF3355', '#55EE22', '#354D73', '#666633', '#553FCF'],
cutout: 0
}]
},
options: {
layout: {
padding: {
bottom: 25
}
},
plugins: {
tooltip: {
enabled: true,
callbacks: {
footer: (ttItem) => {
let sum = 0;
let dataArr = ttItem[0].dataset.data;
dataArr.map(data => {
sum += Number(data);
});
let percentage = (ttItem[0].parsed * 100 / sum).toFixed(2) + '%';
return `Percentage of data: ${percentage}`;
}
}
},
/** Imported from a question linked above.
Apparently Works for ChartJS V2 **/
datalabels: {
formatter: (value, dnct1) => {
let sum = 0;
let dataArr = dnct1.chart.data.datasets[0].data;
dataArr.map(data => {
sum += Number(data);
});
let percentage = (value * 100 / sum).toFixed(2) + '%';
return percentage;
},
color: '#ff3',
}
}
},
plugins: [ChartDataLabels]
});
<body>
<canvas id="DoeNut1" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.js" ></script>
</body>
这篇关于ChartJS 版本 3 如何向饼图工具提示添加百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
