JavaScript Chart.js - форматирование пользовательских данных для отображения на всплывающей подсказке

Ответ 1

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

 // String - Template string for single tooltips
 tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
 // String - Template string for multiple tooltips
 multiTooltipTemplate: "<%= value + ' %' %>",

Таким образом, вы можете добавить знак "%" после ваших значений, если вы этого хотите.

Вот jsfiddle, чтобы проиллюстрировать это.

Обратите внимание, что tooltipTemplate применяется, если у вас есть только один набор данных, multiTooltipTemplate применяется, если у вас есть несколько наборов данных.

Эти параметры упоминаются в разделе о конфигурации глобальной диаграммы документации. Посмотрите, стоит проверить все остальные параметры, которые можно настроить там.

Обратите внимание, что ваши наборы данных должны содержать только числовые значения. (Никаких признаков% или других вещей там).

Ответ 2

Для chart.js 2.0+ это изменилось (больше нет tooltipTemplate/multiTooltipTemplate). Для тех, кто просто хочет получить доступ к текущему, неформатированному значению и начать его настройку, всплывающая подсказка по умолчанию такая же, как:

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return tooltipItem.yLabel;
            }
        }
    }
}

I.e., вы можете вернуть изменения в tooltipItem.yLabel, где значение y-оси. В моем случае я хотел добавить знак доллара, округление и тысячи запятых для финансовой диаграммы, поэтому я использовал:

options: {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                });
            }
        }
    }
}

Ответ 3

В chart.js 2.1.6 я сделал что-то вроде этого (в typescript):

  let that = this;
  options = {
    legend: {
      display: false,
      responsive: false
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          let account: Account = that.accounts[tooltipItem.index];
          return account.accountNumber+":"+account.balance+"€";
        }
      }
    }
  }

Ответ 4

Вы можете дать tooltipTemplate функцию и отформатировать всплывающую подсказку по своему усмотрению:

tooltipTemplate: function(v) {return someFunction(v.value);}
multiTooltipTemplate: function(v) {return someOtherFunction(v.value);}

Те, у которых аргументы "v" содержат много информации, кроме свойства value. Вы можете поместить "отладчик" внутри этой функции и проверить их самостоятельно.

Ответ 5

tooltips: {
          callbacks: {
            label: (tooltipItem, data) => {
              // data for manipulation
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            },
          },
        },

Ответ 6

В Chart.Js 2.8.0 конфигурацию для настраиваемых всплывающих подсказок можно найти здесь: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback (благодаря @prokaktus)

Если вы хотите, например, показать некоторые значения с префиксом или постфиксом (в этом примере скрипт добавляет единицу kWh к значениям на графике), вы можете сделать это следующим образом:

options: {
  rotation: 1 * Math.PI,
  circumference: 1 * Math.PI,
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        console.log(data);
        console.log(tooltipItem);

        var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || '';

        if (label) {
          label += ' kWh';
        }

        return label;
      }
    }
  }
}

Пример скрипки тоже здесь: https://jsfiddle.net/y3petw58/1/

Ответ 7

tooltips: {
            enabled: true,
                  mode: 'single',
                  callbacks: {
                    label: function(tooltipItems, data) { 
                      return data.datasets[tooltipItems.datasetIndex].label+": "+tooltipItems.yLabel;
                    }
                  }
                }

Ответ 8

Вам нужно использовать Label Callback. Общий пример округления значений данных, следующий пример округляет данные до двух десятичных разрядов.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

Если вы утешаете аргументы функции Label Callback, вы будете иметь структуру, подобную этой, наборы данных, массив состоит из разных линий, которые вы хотите построить на диаграмме.

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

Чтобы различать разные строки и манипулировать данными всплывающей подсказки на основе данных других строк, мне пришлось написать эту логику.

  callbacks: {
    label: function (tooltipItem, data) {
      console.log('data', data);
      console.log('tooltipItem', tooltipItem);
      let updatedToolTip: number;
      if (tooltipItem.datasetIndex == 0) {
        updatedToolTip = tooltipItem.yLabel;
      }
      if (tooltipItem.datasetIndex == 1) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[0].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 2) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[1].data[tooltipItem.index];
      }
      if (tooltipItem.datasetIndex == 3) {
        updatedToolTip = tooltipItem.yLabel - data.datasets[2].data[tooltipItem.index]
      }
      return updatedToolTip;
    }
  } 

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