나는'm 를 보려고 일부 데이터를 사용하여 도넛 차트에서 차트.js2.
현재 차트는 다음과 같습니다:
나의 원하는 출력을 표시해야 또 다른 특성 비율하고,다음과 같습니다:
나는've 설명서를 읽고,수't 에 대처하기 때문에이's 매우 일반적이고 나는'm 에 새로운 자바 스크립트.
나의 코드의 첫 번째 차트는 다음과 같다:
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'
]
}]
};
사용자 정의할 수 있습 도구 설명을 사용하여 차트 옵션 도구 설명 구성 섹션에서 설명했듯이 여기:http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration
예제와 같이 아래 코드를 변경할 수 있습 같은 것들을 색상,크기 조정과 스타일이다. 체크아웃 설명서 링크 전체에 대한 목록의 구성 옵션이 있습니다.
당신이 원하는 경우 추가 비율 도구 설명을 표시할 수 있습 도구 설명 콜백]1. 이 문서는 목록 모든 가능한 사용자 정의 콜백 필드가 있습니다.
아래 예에서 나는 설정"title"을 보여주는 레이블 이름,"라벨"가치를 보여,추가의 백분율면"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:
당@Tot Zam's 에 대답하지만,화살표를 사용하여 기능을 위한 간단히:
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
}
}
}