it-swarm.com.de

Wie kann man den Tooltip eines Chart.js 2.0 Donut-Diagramms anpassen?

Ich versuche, einige Daten mit einem Donut-Diagramm von Chart.js2 anzuzeigen.

Mein aktuelles Diagramm sieht so aus:

 current chart

Meine gewünschte Ausgabe muss ein anderes Attribut enthalten, nämlich den Prozentsatz, und sieht folgendermaßen aus:

 desired chart with percentage

Ich habe die Dokumentation gelesen, komme aber damit nicht zurecht, weil sie sehr allgemein ist und JavaScript neu ist.

Mein Code für das erste Diagramm lautet wie folgt:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ]
      }]
    };
15
user7334203

Sie können die QuickInfos mithilfe des Tooloption-Konfigurationsabschnitts für Diagrammoptionen anpassen, wie hier erläutert: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

Wie im folgenden Beispielcode gezeigt, können Sie Dinge wie Farbe, Größe und Format ändern. In der oben verlinkten Dokumentation finden Sie eine vollständige Liste der konfigurierbaren Optionen. 

Wenn Sie den Prozentsatz der Tooltip-Anzeige hinzufügen möchten, können Sie tooltip callbacks verwenden. Die Dokumentation enthält eine Liste aller möglichen anpassbaren Callback-Felder.

Im folgenden Beispiel habe ich den "Titel" so eingestellt, dass der Name der Bezeichnung angezeigt wird, "Bezeichnung", um den Wert anzuzeigen, und der Prozentsatz zu "afterLabel" hinzugefügt.

var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    tooltips: {
      callbacks: {
        title: function(tooltipItem, data) {
          return data['labels'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
        afterLabel: function(tooltipItem, data) {
          var dataset = data['datasets'][0];
          var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
          return '(' + percent + '%)';
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
  }
});

Arbeits-JSFiddle: https://jsfiddle.net/m7s43hrs/

42
Tot Zam

Wie bei @Tot Zam, aber zur Kürze Pfeilfunktionen verwenden

options: {
  tooltips: {
    callbacks: {
      title: (items, data) => data.datasets[items[0].datasetIndex].data[items[0].index].myProperty1,
      label: (item, data) => data.datasets[item.datasetIndex].data[item.index].myProperty2
    }
  }
}
1
Merenzo