Chart.js工具提示值以两行显示

Question

我正在使用chart.js。我想在工具提示中悬停两个值。他们两个都在新的一行，但我真的不知道如何。此示例仍然在一行中返回字符串。我用``尝试了es6语法，但没有任何成功。有没有办法在不使用自定义html的情况下存档？

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

Answer 1

你不能使用新行（\n）字符或ES6语法（因为canvas / chart.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>

Answer 2

还有其他选项如何在图表js工具提示中拆分两行：

1. 默认情况下，如果在数组（source）中提供值，则会将值分开，因此在您的情况下，您可以尝试：

   return [someValue, someValue2];
   

2. 或者，您可以使用split（source）：

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

两个选项都应该提供相同的结果。

Answer 3

这对我有用。只需在工具提示回调中返回字符串数组作为标签即可。

 tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        let label = "Line 1";
        let label2 = "Line 2";
        return [label, label2];
      }
    }
  }