Chartjs 2.xのカスタマイズツールチップ

Question

画像に表示されているものはchartjs 1.xバージョンで作成されています。あなたは各ポイント上のホバリングで見ることができるように、私はそれぞれの対応するポイントの両方のデータセットに対して同じツールチップを持っています。

しかし、私たちのchartjsバージョン2にアップグレードした後、私は別々に各点のツールチップを表示することができます。私は古いスタイルのツールチップを持つことができますどのように

を（絵を見て） chartjsバージョン1.xのような（最初の画像のような）？

設定はありますか？ optionsで

Answer 1

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