Fügen Sie einen Text als Tooltip für jeden Punkt in einem Liniendiagramm hinzu

Question

Ich frage mich, ob es in ChartJS eine Option gibt, wie ich zusätzliche Informationen sehen kann, wenn ich über einen einzelnen Punkt in einem Liniendiagramm schwebe. Derzeit sieht meine Daten wie folgt aus:

function drawChart(dataSets) { 
    Chart.defaults.global.maintainAspectRatio = false; 
    Chart.defaults.global.responsive = false; 
    var data = { 
     labels: ["ID"] 
     , datasets: dataSets 
    }; 
    var options = { 
     title: { 
      display: true 
      , text: 'Custom Chart Title' 
     } 
     , scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
      , xAxes: [{ 
       type: "linear" 
       , position: "bottom" 
      }] 
     } 
     , tooltips: { 
      callbacks: { 
       label: function (tooltipItem, data) { 
        alert("Entered tooltip callback."); 
        return i18n.t('chart.count') + ': ' + getCount(tooltipItem, data.datasets); 
       } 
      } 
     } 
    }; 
    var myChart = Chart.Line(ctx, { 
     data: data 
     , options: options 
    }); 
} 

function getCount(tooltipItem, datasets) { 
    return datasets[tooltipItem.datasetIndex].data.find(datum => { 
     return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel; 
    }).count; 
} 

Und das ist, wie ein Datenpunkt wie folgt aussieht:

x:5 
, y:5 
, count:2 

Aber die alert „Eingegebene Tooltip“ nie aufgerufen wird, was mache ich falsch? Stattdessen bekomme ich diesen Fehler auf meiner Konsole (Google Chrome):

Answer 1

Die Art, wie ich meine benutzerdefinierten Tooltips hinzugefügt. Zum einen habe ich eine Datenmenge in dem Datenarray i zusätzliche Informationen wie „count“

x: 10, 
y: 12, 
count: 2 

in Graph Diese Zählung, wenn ich es unter Tooltips Haken in den Optionen nicht manuell bekommen und gezeigt hinzugefügt.

tooltips: { 
     callbacks: { 
       label: function(tooltipItem, data) { 
        return i18n.t('chart.count') +': ' + getCount(tooltipItem, data.datasets); 
       } 
     } 
} 

Get Anzahl für gegebenen Datensatz, die nicht

function getCount(tooltipItem, datasets) { 
    return datasets[tooltipItem.datasetIndex].data.find(datum => { 
     return datum.x === tooltipItem.xLabel && datum.y === tooltipItem.yLabel; 
    }).count; 
} 

und das Ergebnis in Diagramm dargestellt wurde: Edit: ein Beispiel für meine Daten-Set

return [{ 
    label: 'Example dataset', 
    backgroundColor: '#98cc99', 
    borderColor: '#98cc99', 
    pointHoverRadius: 3, 
    data: [ {x:1,y:2,count:3}, {x:2,y3,count:4}, ...] 
}]; 

Answer 2

Das sieht aus wie es:

label: sensorID, 
data: [0,1,2,3], 
backgroundColor: [ 
     'rgba(' + rndColor() + ',' + rndColor() + ',' + rndColor() + ',0.2)' 
], 
borderColor: [ 
     'rgba(' + rndColor() + ',' + rndColor() + ',' + rndColor() + ',0.2)' 
], 
options: { 
    tooltips: { 
     enabled: true 
     custom: function(tooltip) { 
      // code here to customize a tooltip 
     } 
    } 
} 

http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

http://www.chartjs.org/docs/#advanced-usage-external-tooltips

Siehe Probe/Linie -customTooltips.html für Beispiele, wie manbekommtgestartet.