Chart.js 2.0 - Tooltip zeigt unvollständige Daten bei Hover

Der Tooltip zeigt Details nur auf Datenpunkt, anstatt alle Werte unter der Bezeichnung anzuzeigen. Ich möchte alle Details in der Symbolleiste anzeigen, sagen wir, wenn der Benutzer den Punkt mit dem Label 1 schwebt, dann sollte es im Tooltip angezeigt werden. Hier ist die jsbin.Chart.js 2.0 - Tooltip zeigt unvollständige Daten bei Hover

Prime und Fibonacci: 2

My Second-Datensatz: 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>

Quelle

2017-03-01 Deamon

Sie einen Tooltip Rückruf-Funktion nutzen können, lesen Sie Thread here. Ich habe Ihre Funktion unten aktualisiert und Sie sind bereit zu gehen. Viel Glück!

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; 
        } 
       } 
      } 
     } 
    }); 
}

Quelle

2017-03-01 11:52:48

Chart.js 2.0 - Tooltip zeigt unvollständige Daten bei Hover

Antwort

Verwandte Themen