我的图表.js自定义交互模式如何使用"最近"功能？

Question

我有一个图表，在选项中实现了一个名为myCustomMode的自定义交互模式:

interaction: {
intersect: false,
mode: 'myCustomMode',
axis : 'x'
},

然而，现在只有当用户正好在x轴上而不是当他们"接近"时才会调用事件。如果我将模式更改为最接近我看到的所需行为，但随后无法实现我的自定义(更新的注释)。有没有办法有一个自定义模式，并有最近的模式，以某种方式扩展Chart.js的当前功能?

下面是我的自定义模式函数:

Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
const position = getRelativePosition(e, chart);
console.log("X:"+position.x);

const items = [];
Interaction.evaluateInteractionItems(chart, 'x', position, (element, datasetIndex, index) => {

if (element.inXRange(position.x, useFinalPosition) && index_tracker!=index) {

index_tracker=index;
/*const activePoints = chart.getElementsAtEventForMode(ev,, 'nearest', { intersect: true }, true);
const firstPoint = activePoints[0];
const datasetIndex = firstPoint.datasetIndex;
index = firstPoint.index;*/

items.push({element, datasetIndex, index});
const xLabel = chart.data.labels[index];
const yValue1 = chart.data.datasets[0].data[index];
const yValue2 = chart.data.datasets[1].data[index];
chart.options.plugins.annotation.annotations[0].xMin = index-0.5;
chart.options.plugins.annotation.annotations[0].xMax = index+0.5;
chart.options.plugins.annotation.annotations[1].label.content = [xLabel+' : Stay home','USD '+yValue1.toLocaleString()];
chart.options.plugins.annotation.annotations[2].label.content = [xLabel+' : Go study','USD '+yValue2.toLocaleString()];
/* This code ensures the point hover only changes with the annotation code, but they we lose the 
really cool 'nearest' mode of interaction which I cant replicate in this function. We can either:
-- leave as and get cool interaction but values only update when exactly on new X point OR
-- uncomment code below to only update point hover when exactly on X point (uncool and get 2 points instead of 1 sometimes) OR
-- uncomment code below and move mode:"myCustomMode" from ToolTip to Interaction in options to have most uncool verison
-- Finally (preferred) we could try to implement 'nearest' functionality here by somehow extending their mode but can't figure this out?

//Change hover points - sure a better way to do this
chart.data.datasets[0].pointRadius = [0,0,0,0,0,0,0,0,0,0,0];
chart.data.datasets[0].pointBorderWidth = [0,0,0,0,0,0,0,0,0,0,0];
chart.data.datasets[0]['pointRadius'][index] = 6;
chart.data.datasets[0]['pointBorderWidth'][index] = 5;

chart.data.datasets[1].pointRadius = [0,0,0,0,0,0,0,0,0,0,0];
chart.data.datasets[1].pointBorderWidth = [0,0,0,0,0,0,0,0,0,0,0];
chart.data.datasets[1]['pointRadius'][index] = 6;
chart.data.datasets[1]['pointBorderWidth'][index] = 5;
*/
chart.update();    
}
});
return items;
};

Thanks in advance

Answer 1

我不太明白用例，但我认为它可能是这样的:

Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
const nearestItems = Interaction.modes.nearest(chart, e, {axis: 'x', intersect: false}, useFinalPosition);

const items = [];
for (const element of nearestItems) {
const index = element.index;
if (index_tracker != index) {
index_tracker = index;
items.push(element);
const xLabel = chart.data.labels[index];
const yValue1 = chart.data.datasets[0].data[index];
const yValue2 = chart.data.datasets[1].data[index];
chart.options.plugins.annotation.annotations.box.xMin = index - 0.5;
chart.options.plugins.annotation.annotations.box.xMax = index + 0.5;
chart.update();    
}
};
return items;
};

Codepen: https://codepen.io/stockinail/pen/yLRBQwK

编辑:add info

关于自定义交互的官方文档在这里:https://www.chartjs.org/docs/latest/configuration/interactions.html#custom-interaction-modes

但是我想你已经看过你的代码了。不幸的是，文档没有很好地解释"默认"模式存储在添加新模式的地图中。也许可以改进一下。无论如何，GH中有一个类似的话题被触及的讨论:https://github.com/chartjs/Chart.js/discussions/11148如果我可以的话，你管理注释选项的方式也可以改进为可脚本化选项。如果你能分享整个图表选项，我可以建议一些更新给你。