javascript - 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>