Chart.js 2.0 - ツールチップがホバー上で不完全なデータを表示しています

ツールチップは、ラベルの下にあるすべての値を表示するのではなく、データポイントのみの詳細を表示しています。ツールバーにすべての詳細を表示したい場合、ユーザーがラベル1のポイントにカーソルを置いたときにツールチップに次のように表示されるとします。ここにはjsbinがあります。Chart.js 2.0 - ツールチップがホバー上で不完全なデータを表示しています

首相とフィボナッチ：2

私の第二のデータセット：2

<!doctype html> 
<html lang="ja"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Line Chart Test</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script> 
    <script language="JavaScript"><!-- 
    function displayLineChart() { 
    var data = { 
     labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
     datasets: [ 
      { 
       label: "Prime and Fibonacci", 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
      }, 
      { 
       label: "My Second dataset", 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "red", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34] 
      } 
     ] 
    }; 
    var holder = document.getElementById('lineChart'); 
    var options = {}; 
    new Chart(holder, { 
       type: 'line', 
       data: data, 
       options: { 
        responsive: true 
       } 
      }); 
    } 
    --></script> 
</head> 
<body onload="displayLineChart();"> 
    <div class="box"> 
    <canvas id="lineChart" height="450" width="800"></canvas> 
    </div> 
</body> 
</html>

出典

2017-03-01 Deamon

あなたがスレッドhereを読んで、機能をコールバックツールチップを使用することができます。私はあなたの機能を下に更新し、あなたは行く準備ができています。がんばろう！

function displayLineChart() { 
    var data = { 
     labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
     datasets: [ 
      { 
       label: "Prime and Fibonacci", 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29] 
      }, 
      { 
       label: "My Second dataset", 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "red", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34] 
      } 
     ] 
    }; 
    var holder = document.getElementById('lineChart'); 
    var options = {}; 
    new Chart(holder, { 
     type: 'line', 
     data: data, 
     options: { 
      responsive: true, 
      tooltips: { 
       callbacks: { 
        label: function(tooltipItem, data) { 
         console.log(tooltipItem); 
         console.log(data.datasets[0]) 
         var value = data.datasets[0].data[tooltipItem.index]; 
         var label = data.labels[tooltipItem.index]; 
         var datah = []; 
         datah.push(data.datasets[0].label + ' ' + value); 
         datah.push(data.datasets[1].label + ' ' + value); 
         return datah; 
        } 
       } 
      } 
     } 
    }); 
}

出典

2017-03-01 11:52:48

Chart.js 2.0 - ツールチップがホバー上で不完全なデータを表示しています

答えて

関連する問題