it-swarm-id.com

Bagaimana cara menyesuaikan tooltip dari Bagan Donat Chart.js 2.0?

Saya mencoba menampilkan beberapa data menggunakan diagram donat dari Chart.js2.

Bagan saya saat ini terlihat seperti ini:

 current chart

Output yang saya inginkan harus menunjukkan atribut lain, yang merupakan persentase, dan terlihat seperti ini:

 desired chart with percentage

Saya sudah membaca dokumentasinya, tetapi saya tidak bisa mengatasinya karena ini sangat umum dan saya baru mengenal JavaScript.

Kode saya untuk bagan pertama adalah sebagai berikut:

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

Anda dapat menyesuaikan tooltips menggunakan bagian konfigurasi tooltip opsi bagan, seperti dijelaskan di sini: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

Seperti ditunjukkan dalam contoh kode di bawah ini, Anda dapat mengubah hal-hal seperti warna, ukuran dan gaya. Lihatlah dokumentasi yang ditautkan di atas untuk daftar lengkap opsi yang dapat dikonfigurasi. 

Jika Anda ingin menambahkan persentase ke tampilan tooltip, Anda dapat menggunakan callt tooltip . Dokumentasi memiliki daftar semua bidang panggilan balik yang dapat disesuaikan.

Dalam contoh di bawah ini, saya mengatur "judul" untuk menampilkan nama label, "label" untuk menunjukkan nilai, dan menambahkan persentase ke "afterLabel".

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

Bekerja JSFiddle: https://jsfiddle.net/m7s43hrs/

42
Tot Zam

Sesuai jawaban @Tot Zam, tetapi menggunakan fungsi panah untuk singkat:

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