Как заставить изменения цвета элементов Chart.js, заданные в скрипте, сохраняться, а не немедленно возвращаться к значениям по умолчанию

На чтение 3 мин Опубликовано 05.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаги для предотвращения возврата к значениям по умолчанию:
Пример кода
Объяснение кода:

Вопрос или проблема

Я создаю график пузырьков, отображая каждый пузырь как отдельный набор данных. Обработчик событий показывает дополнительную информацию о каждом наборе данных, когда соответствующая точка нажата. Отображение настроено на отображение информации о до двух точках одновременно, чтобы позволить сравнение бок о бок. Функция, которая запускается при клике, может временно изменять цвет границы и фон для этой точки, однако цвета, похоже, возвращаются к своим значениям по умолчанию, когда элемент графика перестает быть активным. Это проблема, потому что я хочу, чтобы эти цвета указывали, какие точки сравниваются, и я хотел бы, чтобы изменение цвета, заданное в скрипте, сохранялось.

Вот функция, которая настраивает график, включая определение функции onClick и ограничение обработчика событий только на клики мыши:

const config = {
   type: 'bubble',
   data: data,
   options: {
      events: ['click'],
      responsive: true,
      plugins: {
      //установка параметров легенды, заголовка и подсказок; опущено для краткости
      },
   onClick: function(e){
      var element = myChart.getElementsAtEventForMode(e, 'nearest', {intersect: true}, true);
      if (element.length > 0){
         cluster=element[0]
         idx=cluster.datasetIndex; //какой из N пузырьков был нажат 
         cluster.element.options.backgroundColor="#3376699ff"
         cluster.element.options.borderColor="#ff0000"
         var info=document.getElementByClassName("details")
         show_details(info, idx) //отобразить DIV с информацией, относящейся к этой точке
      }
   },
};

К моему сожалению, цвет границы сразу же возвращается к значению по умолчанию rgba(0,0,0,0.1), а цвет пузырька также возвращается к значению по умолчанию сразу после нажатия (если только я не нажму на него второй раз, в этом случае изменение цвета сохраняется, пока я не нажму в другом месте). Я отключил другие обработчики событий в попытке решить проблему, но это не сработало (я думал, что, возможно, наведение мыши переопределяет мое изменение цвета).

Ответ или решение

Для того чтобы обеспечить постоянное изменение цвета элементов графика в Chart.js, необходимо сохранять состояние ваших цветовых изменений в данных самого графика и затем обновлять график, чтобы отобразить эти изменения. Вот как вы можете это сделать:

Шаги для предотвращения возврата к значениям по умолчанию:

Измените структуру данных: Включите свойства цвета в данные каждого набора, чтобы они могли быть обновлены при каждом клике.
Обновите обработчик события: Вместо изменения только свойств элемента, вы должны изменить данные набора данных и вызвать обновление графика.

Пример кода

Ниже приведен улучшенный пример вашего оригинального кода:

const data = {
    datasets: [
        {
            label: 'Dataset 1',
            data: [{x: 10, y: 20, r: 5}],
            backgroundColor: 'rgba(0, 0, 0, 0.1)',
            borderColor: 'rgba(0, 0, 0, 0.1)',
        },
        {
            label: 'Dataset 2',
            data: [{x: 15, y: 25, r: 5}],
            backgroundColor: 'rgba(0, 0, 0, 0.1)',
            borderColor: 'rgba(0, 0, 0, 0.1)',
        }
        // другие наборы данных
    ]
};

const config = {
    type: 'bubble',
    data: data,
    options: {
        events: ['click'],
        responsive: true,
        plugins: {
            // параметры других плагинов
        },
        onClick: function(e) {
            const element = myChart.getElementsAtEventForMode(e, 'nearest', {intersect: true}, true);
            if (element.length > 0) {
                const cluster = element[0];
                const idx = cluster.datasetIndex;

                // Изменить цвета в данных
                this.data.datasets[idx].backgroundColor = "#33766999"; // Зеленый
                this.data.datasets[idx].borderColor = "#ff0000"; // Красный

                // Обновляем график
                this.update();

                const info = document.getElementsByClassName("details");
                show_details(info, idx); // Отображаем информацию о наборе
            }
        },
    },
};

const myChart = new Chart(ctx, config);

Объяснение кода:

Структура данных: Каждый набор данных содержит поля backgroundColor и borderColor. Это значение нужно модифицировать при каждом клике.
Изменение цвета: В обработчике события onClick вы меняете цвета для конкретного индекса набора данных.
Обновление графика: Вызов this.update() обновляет график с новыми цветами, позволяя им оставаться измененными.

Эти шаги позволят вам зафиксировать изменения цвета при взаимодействии с графиком, не возвращая их к значениям по умолчанию. Это позволит пользователям четко видеть, какие точки они сравнивают на вашем графике.