Javascript 更改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)'
            ],
        }],
    }
})

---

您可以在图表选项中将工具提示的

yAlign

属性设置为

bottom

，以始终在底部位置显示工具提示的插入符号

options: {
    tooltips: {
        yAlign: 'bottom'
    }
}

ᴅᴇᴍᴏ

var ctx=document.getElementById（“图表”）.getContext（“2d”）；
var myChart=新图表（ctx{
键入：“甜甜圈”，
数据：{
标签：['一月'，'二月'，'三月']，
数据集：[{
标签：“数据集”，
数据：[30,50,20]，
背景颜色：['rgb（153102255）''rgb（25520586）''rgb（54162235）']
}]
},
选项：{
回答：错，
工具提示：{
Yalling:“底部”
}
}
});
您可以通过将
yAlign
选项设置为“底部”来完成此操作：

jsiddle演示：
定制工具提示的方法很多。下面是一个通过CodePen的好例子



自定义工具提示：函数（工具提示）{
//工具提示元素
var tooltipEl=$（“#chartjs工具提示”）；
//如果没有工具提示，则隐藏
如果（！工具提示）{
工具管道({
不透明度：1
});
返回；
}
//设置插入符号位置
工具管道removeClass（“上下”）；
tooltipEl.addClass（tooltip.yAlign）；
tooltipEl.addClass（tooltip.xAlign）；
//设置文本
html（tooltip.text）；
//在第页上查找Y位置
var-top；
如果（tooltip.yAlign=='over'）{
top=tooltip.y-tooltip.caretHeight-tooltip.caretadding；
}否则{
顶部=tooltip.y+tooltip.caretHeight+tooltip.CareTAdding；
}
//显示、定位和设置字体样式
工具管道({
不透明度：1，
左：tooltip.chart.canvas.offsetLeft+tooltip.x+'px'，
顶部：tooltip.chart.canvas.offsetTop+top+'px'，
fontFamily:tooltip.fontFamily，
fontSize:tooltip.fontSize，
fontStyle:tooltip.fontStyle，
xOffset:tooltip.xOffset，
});
}
感谢您的回复。我不得不接受另一个，因为它是第一个：）@CamielJacobs我同意。很高兴我能帮忙。我在同一时间写下了这个答案，只有在我发布后才看到另一个答案。一旦你获得了足够的声誉，你就可以升级所有有用的答案。工具提示选项似乎不再具有
yAlign
属性，或者我错了吗？@DongBinKim仍然可以使用
/@ts ignore
options: {
    tooltips: {
      yAlign: "bottom"
    }
}