Chart.js2のドーナツチャートを使ってデータを表示しようとしています。
現在のチャートは以下のような感じです: 現在のチャート]1。
私の希望する出力は、別の属性(パーセント)を表示する必要があり、次のようになります: 次のようになります。
ドキュメントを読みましたが、非常に一般的であり、JavaScript初心者なので、対処できません。
私の最初のチャートのコードは以下の通りです:
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'
]
}]
};
ツールチップは、チャート・オプションのツールチップ設定セクションを使ってカスタマイズできます。
下のコード例に示すように、色、サイズ、スタイルなどを変更することができます。設定可能なオプションの完全なリストについては、上記のリンク先のドキュメントをチェックしてください。
ツールチップの表示にパーセンテージを追加したい場合は、tooltip callbacksを使うことができます。ドキュメントにはカスタマイズ可能なコールバックフィールドのリストがあります。
以下の例では、"title" をラベル名を表示するように設定し、"label" を値を表示するように設定し、"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
}
}
});
動くJSFiddle: