Chart.js의 멀티 라벨 툴팁

-1

최근 Chart.js에 따라 v1에서 v2로 오래된 프로젝트를 옮겼습니다.Chart.js의 멀티 라벨 툴팁

하지만 아래에 표시된 것처럼 다중 레이블 툴팁을 다시 만들 수 없습니다.

이 기능은 기본적으로 사용하도록 설정되었습니다. 누구든지 이것을 보관하려면 어떤 옵션을 변경해야하는지 알고 있습니까?

내 코드까지.

new Chart(document.getElementById('mainChart'), { 
     type: 'line', 
     data: { 
      labels: labels, 
      datasets: [ 
      { data: data, label: "Expenses", fill: false 
      ] 
     }, 
     options: { 
      animation: { duration: 0 }, 
      hover: { animationDuration: 0 }, 
      responsiveAnimationDuration: 0 
     } 
     });

출처

2017-11-23 Adi

귀하의 코드 샘플은'채우기 후 닫는 괄호를 누락 될 것으로 보인다. – Shiffty

툴팁 섹션의 mode 옵션을 사용하여 설정할 수 있습니다. 모드를 index으로 설정하면 원하는 모드로 설정됩니다. mode: 'index'와 샘플 아래

new Chart(document.getElementById('mainChart'), { 
    type: 'line', 
    data: { 
     labels: labels, 
     datasets: [ 
     { data: data, label: "Expenses", fill: false } 
     ] 
    }, 
    options: { 
     animation: { duration: 0 }, 
     hover: { animationDuration: 0 }, 
     responsiveAnimationDuration: 0, 
     tooltips: { mode: 'index' }    
    } 
    });

: FALSE ':

new Chart(document.getElementById('chartJSContainer'), { 
 
     type: 'line', 
 
     data: { 
 
     labels: ["1", "2", "3", "4", "5", "6"], 
 
     datasets: [{ 
 
\t  \t \t data: [7, 11, 5, 8, 3, 7], 
 
      label: "Income", 
 
      fill: false, 
 
      backgroundColor: 'rgb(54, 162, 235)', 
 
      borderColor: 'rgb(54, 162, 235)', 
 
      }, { 
 
\t  \t \t data: [12, 19, 3, 5, 2, 3], 
 
      label: "Expenses", 
 
      fill: false, 
 
      backgroundColor: 'rgb(255, 99, 132)', 
 
      borderColor: 'rgb(255, 99, 132)', 
 
      } 
 
      ] 
 
     }, 
 
     options: { 
 
      animation: { 
 
      duration: 0 
 
      }, 
 
      hover: { 
 
      animationDuration: 0 
 
      }, 
 
      responsiveAnimationDuration: 0, 
 
      tooltips: { 
 
      mode: 'index' 
 
      } 
 
     } 
 
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
 
<body> 
 
    <canvas id="chartJSContainer" width="600" height="400"></canvas> 
 
</body>

출처

2017-11-23 10:59:16 Shiffty

감사합니다. – Adi

답변

관련 문제