Обратный вызов всплывающей подсказки ChartJS 3.7.1, получение значения метки для следующего индекса

В настоящее время я перехожу с 2.9.3 на 3.7.1, и у меня возникают проблемы с переносом функции обратного вызова из объекта параметров.

Бывшее местонахождение: options.tooltips.callbacks.title
Перенесенное местоположение: options.plugins.tooltip.callbacks.title

Бывшая функция (упрощенная):

function (tooltipItems, data) {
    var tooltipItem = tooltipItems[0];
    var currentLabel = data.labels[tooltipItem.index];
    var nextLabel = data.labels[tooltipItem.index +1];
    return currentLabel + ' - ' + nextLabel;
}

Перенесенная функция:

function (tooltipItems) {
    var tooltipItem = tooltipItems[0];
    var currentLabel = tooltipItem.label;
    var nextLabel = ? // how to get nextLabel?
    return currentLabel + ' - ' + nextLabel;
}

tooltipItem.dataset имеет массив меток, но он кажется пустым, когда я console.log(tooltipItems)

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
1
0
11
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы получаете доступ к объекту диаграммы и имеете индекс данных, поэтому вы можете просто получить правильную метку из массива меток следующим образом:

title: (items) => {
  const item = items[0];
  const {
    chart
  } = item;
  const nextLabel = chart.data.labels[item.dataIndex + 1] || '';
  return `${item.label}, next label: ${nextLabel}`;
}

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title: (items) => {
            const item = items[0];
            const {
              chart
            } = item;
            const nextLabel = chart.data.labels[item.dataIndex + 1] || '';
            return `${item.label}, next label: ${nextLabel}`;
          }
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

Спасибо за быстрый и полезный ответ :)

Lahm 17.05.2022 14:44

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