2016-12-01 5 views
0

ChartJSを使用して複数の折れ線グラフを作成したいと思います。複数の折れ線グラフが正常に動作しています。ツールチップは私が問題を抱えているだけです。コードと画像を確認してください。ChartJSでラインチャートのツールチップを取得できません

var ctx = document.getElementById("myChart").getContext("2d"); 
 

 
var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      fill: false, 
 
      lineTension: 0.1, 
 
      backgroundColor: "rgba(75,192,192,0.4)", 
 
      borderColor: "rgba(75,192,192,1)", 
 
      borderCapStyle: 'butt', 
 
      borderDash: [], 
 
      borderDashOffset: 0.0, 
 
      borderJoinStyle: 'miter', 
 
      pointBorderColor: "rgba(75,192,192,1)", 
 
      pointBackgroundColor: "#fff", 
 
      pointBorderWidth: 1, 
 
      pointHoverRadius: 5, 
 
      pointHoverBackgroundColor: "rgba(75,192,192,1)", 
 
      pointHoverBorderColor: "rgba(220,220,220,1)", 
 
      pointHoverBorderWidth: 2, 
 
      pointRadius: 1, 
 
      pointHitRadius: 10, 
 
      data: [65, 59, 80, 81, 56, 55, 40], 
 
      spanGaps: false, 
 
     }, 
 
     { 
 
      label: "My Second dataset", 
 
      fill: false, 
 
      lineTension: 0.1, 
 
      backgroundColor: "rgba(255, 99, 132, 1)", 
 
      borderColor: "rgba(255, 99, 132, 1)", 
 
      borderCapStyle: 'butt', 
 
      borderDash: [], 
 
      borderDashOffset: 0.0, 
 
      borderJoinStyle: 'miter', 
 
      pointBorderColor: "rgba(255, 99, 132, 1)", 
 
      pointBackgroundColor: "#fff", 
 
      pointBorderWidth: 1, 
 
      pointHoverRadius: 5, 
 
      pointHoverBackgroundColor: "rgba(255, 99, 132, 1)", 
 
      pointHoverBorderColor: "rgba(255, 99, 132, 1)", 
 
      pointHoverBorderWidth: 2, 
 
      pointRadius: 1, 
 
      pointHitRadius: 10, 
 
      data: [40, 59, 80, 100, 56, 80, 70], 
 
      spanGaps: false, 
 
     } 
 
    ] 
 
}; 
 

 
var myLineChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: data 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 

 

 
<canvas id="myChart" width="400" height="400"></canvas>

enter image description here

1月の月私は、2個のデータ[ "私の最初のデータセット":65、 "私の第二のデータセット":40]を持っているので、ツールチップは正しくなく、行進に示します私は2つのデータ(「最初のデータセット」:80、「私の2番目のデータセット」:80)を持っていますが、「My First dataset」値のみを表示するツールチップしかないので、「My Second Dataset」値を見つけることができません。

+0

その作業罰金私が使用chatJsの2.1.xのだとデータが同じ場合にツールチップが両方表示することができ、私は2.2.xののCDNは、私のcharJsファイルをカバー使用しようとしている、私はちょうど見つけ、彼らが変化しそうですあなたのバージョンを下げることができない場合、ツールチップのスタイル、おそらくあなたのカスタムツールチップを持っている必要があります。 – Anami

答えて

0

このようにしてみました。今

options: { 
       tooltips: { 
        mode: 'label' 
       } 
     } 
関連する問題