У меня есть диаграмма, которая реализует настраиваемый режим взаимодействия с именем 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.info("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;
};
заранее спасибо
Я не понимаю вариант использования, но я думаю, что это может быть что-то вроде этого:
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;
};
Кодепен: https://codepen.io/stockinail/pen/yLRBQwK
Обновлено: добавить информацию
Официальная документация о пользовательском взаимодействии находится здесь: https://www.chartjs.org/docs/latest/configuration/interactions.html#custom-interaction-modes
Но я думаю, вы уже посмотрели на это, увидев свой код. К сожалению, документ плохо объясняет, что режимы «по умолчанию» хранятся на карте, где вы добавляете новый. Возможно, можно было бы сделать улучшение. Во всяком случае, в GH есть обсуждение, где затрагивается подобная тема: https://github.com/chartjs/Chart.js/discussions/11148 Если позволите, то, как вы управляете параметрами аннотаций, можно было бы улучшить, перейдя к параметрам, доступным для сценариев. Если вы можете поделиться всеми вариантами диаграммы, я мог бы предложить вам некоторые обновления.
Большое спасибо, прослушивал меня в течение нескольких дней. Не могли бы вы поделиться ссылкой на документы для этого, как искали по всему миру?
Я отредактирую ответ, добавив некоторую информацию.
Круто, большое спасибо, очень ценю поддержку.
Я думаю, вы можете вызвать ближайший режим взаимодействия из своего кода, а затем использовать результат для своей настройки. График.Взаимодействие.ближайший(....).