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>