Как изменить подсказку chartjs, чтобы я мог добавлять настраиваемые строки в подсказки

Как редактировать подсказку chartjs для добавления настраиваемых строк в всплывающие подсказки

enter image description here

например: Я хочу изменить подсказку, как " январь: 28 файлов "или просто"28 файлов"

9
chart.js javascript

3 ответов

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

Chart.defaults.global.tooltipTemplate =
  "<%if (label){%><%=label%>: <%}%><%= value %>";

вот еще один пример:

var ctx = document.getElementById("canvas").getContext("2d");

var myBarChart = new Chart(ctx).Bar(data, {
        tooltipTemplate: "<%= value %> Files"
});
9

проверенный ответ больше не работает. Для Диаграммы.Яш В2 

Chart.defaults.global.tooltipTemplate

- Это исключено.

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

в вашем случае я бы сделал следующее:

window.myLine = new Chart(chart, {
    type: 'bar',
    data: barChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' : ' + tooltipItems.xLabel + " Files";
                    }
                }
            },
     }       
  });

не забудьте установить метатег HTML:

<meta charset="UTF-8">

этот ответ был копией из это вопрос.

7

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

var overrides = {
  // show lables as currency
  scaleLabel: function(label) {
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  },

  // String - Template string for single tooltips
  tooltipTemplate: function(label) {
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  },

  // String - Template string for multiple tooltips
  multiTooltipTemplate: function(label) {
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
}
1