Chart.jsツールチップの値は2行で表示されます

Question

私はchart.jsを使用しています。私は、ホバーに2つの値をツールチップに表示したい。両方とも新しいラインでは、私は本当にどのように知っていない。この例でも、stringは1行で返されます。私はes6の構文を ``だが成功しなかった。カスタムhtmlを使用せずにアーカイブする方法はありますか？あなたはそのことのための新たなライン（\n）文字やES6構文（キャンバス/ chart.jsとして、それをサポートしていません）を使用することはできません

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

Answer 1

。

代わりに、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>