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

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

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

2 ответа:

Вы не можете использовать new-line (\n) символьный или ES6 синтаксис, если на то пошло (как холст / диаграмма.js не поддерживает его) .

Вместо этого следует использовать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. По умолчанию значения разделяются, если они представлены в массиве (source), поэтому в вашем случае вы можете попробовать:

    return [someValue, someValue2];

  2. Или в качестве альтернативы, вы можете использовать split (Источник):

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

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

0