Izz*_*zzi 8 javascript charts reactjs chart.js chart.jsv3
（请注意： v2 有很多答案，这是 v3 的答案）
我正在尝试设置工具提示label和title圆环图。
代码：
//Create the donut chart
donut = new Chart('questions_positivity_donut', {
type: 'doughnut',
data: {
labels: ["Positive", "Other"],
datasets: [{
label: 'Sentiment',
data: [user_context.state.avg_joy, (1-user_context.state.avg_joy)],
backgroundColor: ['#a9a9a9','#f2f2f2']
}]
},
options: {
cutout: "70%",
plugins: {
legend: {
display: false
},
maintainAspectRatio: false,
responsive: true,
tooltip: {
callbacks: {
label: function(context) {
let label = new Intl.NumberFormat('en-US', {style: 'percent', minimumFractionDigits: 0, maximumFractionDigits: 0}).format(context.formattedValue);
return label;
},
title: function(context) {
let title = context.parsed.x;
return title;
}
},
displayColors: false
}
}
}
});
现在label可以工作，并显示数据的值，但title返回空白，而不是返回数据的标签（“正”或“其他”）。
如何在 中返回正确的标题tooltip.callback？
示例：“积极 35%”和“其他 65%”
Lee*_*lee 12
如果您记录上下文，您可以看到它是一个包含对象的数组，在您使用的默认交互模式下，它仅包含一个项目，因此您可以选择该项目，然后访问它的属性，label如下所示：
var options = {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format(context.formattedValue);
return label;
},
title: function(context) {
let title = context[0].label;
return title;
}
},
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>| 归档时间： |
|
| 查看次数： |
9262 次 |
| 最近记录： |