在ChartsJS中对标签进行换行时，工具提示中不需要的逗号

Question

我有一些带有很长标签的地块。我使用在此站点中找到的答案将标签换行。

这是我的标签示例：

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',],

我正在将ChartsJS与PHP集成，并动态生成多个图表。创建图所需的所有信息都存储在数据库中。

因为我需要在所有值中显示％，所以我将此回调用于工具提示

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

问题是，在工具提示中，使用嵌套数组进行换行的标签显示为不想要的逗号，例如：

即使我不使用自定义工具提示，问题仍然存在。如果我们使用嵌套数组破坏标签，通常会发生这种情况吗？有什么整洁的方法可以解决此问题吗？

我知道有一种使用\ n和插件来分割行的换行方法，但是我无法正常工作。当我这样做时，\ n被替换为多余的空间，但没有换行。

Answer 1

简单地如下定义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>