我正在尝试使用chartJS圆环图,而不是在单个数据集上显示每个数据,我希望每个独特的数据(具有自己的唯一标签)显示在其自己的数据集上 . 这意味着在每个数据集上表示它仍然需要两个数据的数据: - 期望值(即80%) - 差值(即20%)
经过一些研究后,我想出了如何使用回调函数向每个数据值显示数据集标签,并在其数值后添加一个百分比字符 . 现在我试图隐藏每个数据集中第二个数据值的工具提示 . 我是javascript的新手,所以一点帮助将不胜感激!干杯 .
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#000';
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
/* Outer doughnut data starts*/
{
data: [90, 10],
backgroundColor: [
'rgba(210, 35, 42, 1)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #1'
},
/* Outer doughnut data ends*/
/* Inner doughnut data starts*/
{
data: [50, 50],
backgroundColor: [
'rgba(210, 35, 42, 0.75)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #2'
},
/* Inner doughnut data ends*/
{
data: [15, 85],
backgroundColor: [
'rgba(210, 35, 42, 0.5)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #3'
},
{
data: [5, 95],
backgroundColor: [
'rgba(210, 35, 42, 0.25)',
'rgba(0, 0, 0, 0.05)'
],
label: 'Skill #4'
}
],
},
options: {
title: {
display: true,
text: 'My Skills',
fontSize: 24,
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
}
}],
yAxes: [{
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
display: false,
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var dslabelamt = dataset.data[tooltipItem.index];
return data.datasets[tooltipItem.datasetIndex].label + ': ' + dslabelamt + '%';
}
}
}
}
});
1 回答
chart.js
中的那些数据集在其他图表中不起作用series
但是基于索引 . 因此,您只需要两个datasets
,然后您必须相应地映射这些值;所以在data
数组的 both 上的index position
0, 1, 2, 3, ...
总和为100
.