charts - ChartJS - 折线图,位置工具提示
问题描述
我有以下带有 3 个数据集的图表。一切正常,除了一个小错误。我想仅将工具提示放置在第一个数据集上,因为它当前放置在所有数据集的平均位置上。
我知道 ChartJS 有定位器功能(下面的那个),但我不知道如何忽略其他 2 个数据集,所以工具提示只贴在第一条折线图上
Chart.Tooltip.positioners.top = function (elements, eventPosition) {
const tooltip = this;
return ;
};
解决方案
您还可以为工具提示定义自定义位置函数。像这样,
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
var x = eventPosition.x;
var y = eventPosition.y;
var minDistance = Number.POSITIVE_INFINITY;
var i, len, nearestElement;
var top_element = elements[0];
for (i = 0, len = elements.length; i < len; ++i) {
console.log(elements[i].tooltipPosition().y);
if (elements[i].tooltipPosition().y < top_element.tooltipPosition().y) {
top_element = elements[i];
}
}
var tp = top_element.tooltipPosition();
x = tp.x;
y = tp.y;
return {
x: x,
y: y
};
};
完成后,您可以在 tooltips.options 中指定它。
更多信息 :
https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes
希望能帮助到你!