如何自定義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 
    } 
    } 
}