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 구문을 사용할 수 없습니다 (캔버스로/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>