作者:萱筱璧 | 来源:互联网 | 2023-02-03 15:58
我使用Chart.js 2.5 创建了一个圆环图.我遇到的问题是工具提示.当我将鼠标悬停在图表上时,会显示工具提示,其中插入符号始终位于左侧或右侧,如下所示:
我想改变插入位置,使其始终显示在底部.那可能吗?
这是我的图表代码
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'dataset',
data: [30, 50, 20],
backgroundColor: [
'rgb(153, 102, 255)',
'rgb(255, 205, 86)',
'rgb(54, 162, 235)'
],
}],
}
})
ɢʀᴜɴᴛ..
16
您可以将yAlign
属性设置bottom
为图表选项中的工具提示,以便始终将工具提示的插入符号显示在底部位置...
options: {
tooltips: {
yAlign: 'bottom'
}
}
ᴅᴇᴍᴏ
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'dataset',
data: [30, 50, 20],
backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)']
}]
},
options: {
responsive: false,
tooltips: {
yAlign: 'bottom'
}
}
});
1> ɢʀᴜɴᴛ..:
您可以将yAlign
属性设置bottom
为图表选项中的工具提示,以便始终将工具提示的插入符号显示在底部位置...
options: {
tooltips: {
yAlign: 'bottom'
}
}
ᴅᴇᴍᴏ
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'dataset',
data: [30, 50, 20],
backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)']
}]
},
options: {
responsive: false,
tooltips: {
yAlign: 'bottom'
}
}
});