Значения подсказки Chart.js отображаются в двух строках

Вопрос:

Я использую chart.js. Я хочу показать при наведении двух значений в подсказке. Оба они в новой строке, но я действительно не знаю, как это сделать. Этот пример по-прежнему возвращает строку в одной строке. Я пробовал синтаксис es6 с », но без каких-либо успехов. Есть ли способ архивировать это без использования пользовательского html?

tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var someValue = "dasdasd";
var someValue2 = "dasdasda2";
return someValue + "/n" + someValue2;
},
}
},

Лучший ответ:

Вы не можете использовать синтаксис новой строки (\n) или синтаксиса ES6 (поскольку canvas/chart.js не поддерживает его).

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

пример

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(tooltipItem, data) {
               var someValue = "Hello";
               return someValue;
            },
            afterLabel: function(tooltipItem, data) {
               var someValue2 = "Mindfuc";
               return someValue2;
            }
         }
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
Ответ №1

есть и другие варианты, как разбить две строки в подсказках диаграммы js:

  1. По умолчанию значения разделяются, если они представлены в массиве (источнике), поэтому в вашем случае вы можете попробовать:

    return [someValue, someValue2];
    
  2. Или, альтернативно, вы можете использовать split (source):

    return (someValue + "/n" + someValue2).split('\n');
    

Оба варианта должны обеспечивать одинаковый результат.

Оцените статью
TechArks.Ru
Добавить комментарий