Нежелательная запятая во всплывающих подсказках при разрыве метки в ChartsJS - PullRequest
Новая
       67

Нежелательная запятая во всплывающих подсказках при разрыве метки в ChartsJS

1 голос
/ 30 мая 2020

У меня есть сюжеты с очень длинными метками. Я использовал ответы, найденные на этом сайте, чтобы разбить метки на новые строки.

Это пример моих меток: 

labels: [ 'Utensilios para escrita e artes','Faz de conta','Jogos',['Materiais não estruturado','/de largo alcançe/recicláveis'],['Repertório artístico-cultural e','científico de diferentes','origens étnico-raciais'],'Livros de história','Materiais para pesquisa',],

Я интегрирую диаграммы JS с PHP и динамическое создание нескольких диаграмм. Вся информация, необходимая для создания графиков, хранится в БД.

Поскольку мне нужно отображать% во всех моих значениях, я использую этот обратный вызов для своих всплывающих подсказок 

tooltips: {
            callbacks: {
                label: function(tooltipItems, data) { 
                    return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.value + '%';
                }
            }
        },

Проблема заключается в том, что во всплывающих подсказках метки с разрывом строки с использованием вложенных массивов отображаются с нежелательной запятой, например: Tooltip problem with one of the graphics

Даже если я не использую настраиваемая всплывающая подсказка проблема остается. Обычно это происходит, если мы разрываем метки с помощью вложенных массивов? Есть ли какой-нибудь изящный способ исправить это?

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

1 Ответ

1 голос
/ 30 мая 2020

Просто также определите функцию tooltips.callbacks.title следующим образом, и она будет работать. Звучит странно, поскольку функция ничего не делает, кроме возврата метки. 

tooltips: {
  callbacks: {        
    title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
    ... 
  }
},

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

new Chart(document.getElementById("chart"), {
  type: "bar",
  data: {
    labels: [
      ['Utensilios para', 'escrita e artes'],
      ['Materiais não estruturado', 'de largo alcançe/recicláveis'],
      ['Repertório artístico-cultural e', 'científico de diferentes', 'origens étnico-raciais']
    ],
    datasets: [{
      label: "A",
      data: [5, 8, 4],
      fill: false,
      backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgb(255, 99, 132)",
      borderWidth: 1
    },
    {
      label: "B",
      data: [3, 5, 4],
      fill: false,
      backgroundColor: "rgba(255, 159, 64, 0.2)",
      borderColor: "rgb(255, 159, 64)",
      borderWidth: 1
    },
    {
      label: "C",
      data: [6, 5, 7],
      fill: false,
      backgroundColor: "rgba(255, 205, 86, 0.2)",
      borderColor: "rgb(255, 205, 86)",
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {        
        title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
        label: (tooltipItems, data) =>
          data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.value + '%'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="100"></canvas>
...