Wie werden XY-Liniendiagramm-Tooltip-Elemente basierend auf dem Wert sortiert und Tausendertrennzeichen hinzugefügt?

Question

Ich verwende Chart.js 2.1.4 und möchte Tooltip-Elemente basierend auf dem Tooltip-Elementwert (yAxis-Wert) sortieren. Ich möchte auch Tausende Trennzeichen zu Werten hinzufügen.

Die Linien in folgenden Bild sollte auf dem Wert sortiert werden zugrunde gelegt:

Dies fügt Separator für Waagen: Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator

Dokumentation verwenden: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration und die Frage oben ich Modifizieren haben versucht, die Code für Tooltips Wert:

var chart_config = { 
    type: 'line', 
    data: {datasets: mydatasets}, 
    options: { 
    tooltips: { 
     mode: 'label', 
     bodySpacing: 10, 
     titleMarginBottom: 15, 
     callbacks: { 
     beforeLabel: function(tooltipItem, data) { 
      var tooltipValue = tooltipItem.xLabel + ': ' + tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); 
      console.log(tooltipValue); 
      return tooltipValue; 
     }, 
     }, 
    }, 
    } 
}; 
var chartHolder = document.getElementById("chartHolder"); 
var chart = new Chart(chartHolder, chart_config); 

Das Problem ist Es gibt jetzt nur einen Teil der Tooltip-Elemente zurück und es gibt einen Fehler in der Konsole: TypeError: vm.labelColors[i] is undefined.

Wie sollte ich den Rückgabewert der Funktion so formatieren, dass keine Fehler auftreten und die Daten wie angegeben angezeigt werden?

Answer 1

Sie haben diese Informationen in den Text & Tabellen: ChartJS Tooltip Configuration Callbacks

Sie dies tun könnte:

var myChart; 

myChart = { 
    type: 'line', 
    data: { 
    datasets: mydatasets 
    }, 
    options: { 
    tooltips: { 
     mode: 'label', 
     callbacks: { 
     title: function(tooltipItem) { 
      return moment(tooltipItem[0].xLabel).format('ll'); 
     }, 
     label: function(tooltipItem, data) { 
      return data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.yLabel; 
     } 
     } 
    } 
    } 
}; 

Answer 2

können Sie verwenden, um die itemSort Rückrufoption für Tooltips, z.B.

tooltips: { 
    itemSort: (a, b, data) => b.yLabel - a.yLabel 
}