Bagaimana cara menyesuaikan tooltip Chart.js 2.0 Doughnut Chart?

Question

Lebih

Sumber Tidak AMP-versi Sunting

Bagaimana cara menyesuaikan tooltip Chart.js 2.0 Doughnut Chart?

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

Bagan saya saat ini terlihat seperti ini:

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

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

Kode saya untuk grafik 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'
        ]
      }]
    };

Tot Zam

Pertanyaan edit 26 Juni 2017 в 3:12

Pemrograman

customization javascript tooltip chart.js2

25 April 2017 в 7:44

6 tayangan

Merenzo

Sumber Tidak AMP-versi Sunting

Sesuai jawaban @Tot Zam'tetapi menggunakan fungsi panah untuk mempersingkat:

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

3

0

Komentar (0)

Tot Zam · Accepted Answer · 2017-05-16T20:14:10+00:00

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

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

Jika Anda ingin menambahkan persentase ke tampilan tooltip, Anda dapat menggunakan tooltip callbacks. Dokumentasi memiliki daftar semua bidang callback yang dapat dikustomisasi.

Pada contoh di bawah ini, saya mengatur "title" untuk menampilkan nama label, "label" untuk menampilkan 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/