我有一个图表,它在选项中实现了一个名为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;
};
先谢了
1条答案
按热度按时间fcipmucu1#
我不太理解这个用例,但我认为它可能是这样的:
代码编号:https://codepen.io/stockinail/pen/yLRBQwK