Пользовательский стиль всплывающей подсказки в Chart.js - PullRequest
Новая
       16

Пользовательский стиль всплывающей подсказки в Chart.js

0 голосов
/ 20 сентября 2018

Кто-нибудь знает, возможно ли стилизовать всплывающую подсказку Chart.js таким образом, чтобы текст казался более жирным для значений и менее жирным для текста, предшествующего ему?

Текущая версия:

current version

Требуемая версия:

desired version

До сих пор я использовал обратные вызовы с многострочным массивом для создания необходимых строк, но я не могу правильно оформить всплывающие подсказки. 

callbacks: {
  label: function (tooltipItem, data) {
    if (tooltipItem.datasetIndex === 1 || tooltipItem.datasetIndex === 2) {
      let line1, line2, line3, line4, line5;
      line1 = data.datasets[tooltipItem.datasetIndex].name;
      line2 = 'Transaction Volume: ' + data.datasets[tooltipItem.datasetIndex].tv[tooltipItem.index];
      line3 = 'YoY%: ' + data.datasets[tooltipItem.datasetIndex].tvYoY[tooltipItem.index];
      line4 = 'Deal Count: ' + data.datasets[tooltipItem.datasetIndex].dc[tooltipItem.index];
      line5 = 'YoY%: ' + data.datasets[tooltipItem.datasetIndex].dcYoY[tooltipItem.index];
      const multistringText = [line1];
      multistringText.push(line2);
      multistringText.push(line3);
      multistringText.push(line4);
      multistringText.push(line5);
      return multistringText;
    }
    ...

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

1 Ответ

0 голосов
/ 21 сентября 2018

Для этого вам нужно отрендерить пользовательскую подсказку .На веб-сайте Chart.js есть хороший пример .

Это большая работа, поскольку вам нужно все обрабатывать самостоятельно (например, позиционирование), но также и единственный способ получить такой высокий уровень.форматированный результат.

...