Chart.js 2.0 도넛 형 차트의 툴팁을 사용자 정의하는 방법은 무엇입니까?

Question

Chart.js2의 도넛 형 차트를 사용하여 일부 데이터를 표시하려고합니다.

나의 현재 차트는 다음과 같습니다

비율이며, 다음과 같습니다 다른 속성, 표시해야 내 원하는 출력 :

을

설명서를 읽었지만 매우 일반적이어서 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' 
     ] 
     }] 
    }; 

Answer 1

당신은 차트 옵션 툴팁 구성 섹션을 사용하여 툴팁을 사용자 정의 할 수 있습니다 : 아래의 예제 코드에 나타낸 바와 같이 http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

색상, 크기 및 스타일 등을 변경할 수 있습니다. 구성 가능한 옵션의 전체 목록은 위에 링크 된 설명서를 참조하십시오.

백분율을 툴팁 디스플레이에 추가하려면 tooltip callbacks을 사용할 수 있습니다. 설명서에는 가능한 모든 사용자 정의 가능한 콜백 필드 목록이 있습니다.

아래 예제에서 레이블 이름을 표시 할 "제목", 값을 표시하는 "레이블"및 "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 : 간결 https://jsfiddle.net/m7s43hrs/

Answer 2

@Tot 잼의 대답은 당으로

만 사용하여 화살표 기능 :

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