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

#jquery #laravel #chart.js #chart.js2 #metronic

#jquery #laravel #chart.js #диаграмма.js2 #metronic

Вопрос:

Я использую тему Metronic, и она использует Chart.js . Во всплывающей подсказке мне нужно показывать только данные без метки. Но когда я не даю метки, диаграммы параметров работают неправильно.

 var config = {
type: 'line',
data: {
    labels: priceDate,
    datasets: [{
        label: "$",
        borderColor: color,
        borderWidth: border,

        pointHoverRadius: 4,
        pointHoverBorderWidth: 12,
        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
        fill: false,
        data: priceList,
    }]
},
options: {
    tooltips: {
        enabled: true,
    },
    responsive: true,
    maintainAspectRatio: true                
}
  

введите описание изображения здесь

Ответ №1:

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

Вот пример:

   tooltip: {
    formatter: function() {
      return `${this.y} ${this.series.name}`;
    }
  },
  

Ответ №2:

Вы пробовали метки: «priceDate», ?

Может ли это работать (вместо повреждения ретривера)?

 options: {tooltips: {enabled: true, dateTimeLabelFormats: {day: '% %, %'}},
  

Комментарии:

1. Да. Пример priceDate = [2020-08-26, 2020-08-26, 2020-08-26 ], Прайс-лист [10, 400, 60]

Ответ №3:

Используйте обратный вызов tooltip.headerFormat или tooltip.formatter для настройки вывода всплывающей подсказки.

API:https://api.highcharts.com/highcharts/tooltip.headerFormat

API: https://api.highcharts.com/highcharts/tooltip.formatter

Ответ №4:

лучше использовать tooltipformatter . там вы можете отформатировать, как всплывающая подсказка должна отображать данные. вот ссылка на jsfiddle, которая показывает только данные и без метки.

Ответ №5:

Я решил проблему с функцией обратного вызова.

 tooltips: {
callbacks: {
 title: function() {}
},
enabled: true}