Как мой пользовательский режим взаимодействия Chart.js может использовать функцию «ближайший»?

У меня есть диаграмма, которая реализует настраиваемый режим взаимодействия с именем 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;
};

заранее спасибо

Я думаю, вы можете вызвать ближайший режим взаимодействия из своего кода, а затем использовать результат для своей настройки. График.Взаимодействие.ближайший(....).

user2057925 05.04.2023 14:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
91
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
};

Кодепен: 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 Если позволите, то, как вы управляете параметрами аннотаций, можно было бы улучшить, перейдя к параметрам, доступным для сценариев. Если вы можете поделиться всеми вариантами диаграммы, я мог бы предложить вам некоторые обновления.

Большое спасибо, прослушивал меня в течение нескольких дней. Не могли бы вы поделиться ссылкой на документы для этого, как искали по всему миру?

adam 05.04.2023 22:55

Я отредактирую ответ, добавив некоторую информацию.

user2057925 06.04.2023 08:52

Круто, большое спасибо, очень ценю поддержку.

adam 06.04.2023 22:15

Другие вопросы по теме