自定義Chartjs 2.x工具提示

Question

您在圖片上看到的內容由chartjs 1.x版本創建。正如你可以看到在每個點上懸停，我對每個對應點的兩個數據集都有相同的工具提示。

但升級我們的chartjs 2版後，我可以顯示每個點seperately的提示。（看照片）

我怎麼能有舊式的提示像chartjs版本1.x（如第一張圖片）？

是否有任何設置或？

Answer 1

在options設置tooltips.mode到label

options: { 
...... 
    tooltips: { 
     mode: 'label', 
    }, 
....... 
} 

var chartColors = { 
 
    red: 'rgb(255, 99, 132)', 
 
    orange: 'rgb(255, 159, 64)', 
 
    yellow: 'rgb(255, 205, 86)', 
 
    green: 'rgb(75, 192, 192)', 
 
    blue: 'rgb(54, 162, 235)', 
 
    purple: 'rgb(153, 102, 255)', 
 
    grey: 'rgb(231,233,237)' 
 
}; 
 

 
var randomScalingFactor = function() { 
 
    return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100); 
 
} 
 
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
var config = { 
 
    type: 'line', 
 
    data: { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     backgroundColor: chartColors.red, 
 
     borderColor: chartColors.red, 
 
     data: [ 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor() 
 
     ], 
 
     fill: false, 
 
    }, { 
 
     label: "My Second dataset", 
 
     fill: false, 
 
     backgroundColor: chartColors.blue, 
 
     borderColor: chartColors.blue, 
 
     data: [ 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor() 
 
     ], 
 
    }] 
 
    }, 
 
    options: { 
 
    responsive: true, 
 
    title: { 
 
     display: true, 
 
     text: 'Chart.js Line Chart' 
 
    }, 
 
    tooltips: { 
 
     mode: 'label', 
 
    }, 
 
    hover: { 
 
     mode: 'nearest', 
 
     intersect: true 
 
    }, 
 
    scales: { 
 
     xAxes: [{ 
 
     display: true, 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Month' 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     display: true, 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Value' 
 
     } 
 
     }] 
 
    } 
 
    } 
 
}; 
 

 

 
var ctx = document.getElementById("canvas").getContext("2d"); 
 
window.myLine = new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script> 
 
<div style="width:75%;"> 
 
    <canvas id="canvas"></canvas> 
 
</div>