ChartsJS：自定義工具提示總是顯示

Question

Im使用ChartJS在我的網站上創建圖形。

我試圖創建一個自定義工具提示。按照documentation，這應該是很容易：

var myPieChart = new Chart(ctx, { 
    type: 'pie', 
    data: data, 
    options: { 
     tooltips: { 
      custom: function(tooltip) { 
       // tooltip will be false if tooltip is not visible or should be hidden 
       if (!tooltip) { 
        return; 
       } 
     } 
     } 
    } 
    }); 

我的問題是，tooptip是從未假，因爲這是始終顯示我的自定義工具提示。

請參閱本JSFiddle（線永遠不會執行42）

問：難道tooltip從來都不是假的，還是我失去了一些東西的錯誤？

Answer 1

自定義工具提示選項用於當您想使用HTLM/CSS在畫布範圍之外（而不是使用內置的工具提示）創建/創建自己的工具提示時使用自定義工具提示選項。

爲了做到這一點，您必須在畫布外部定義一個包含工具提示的位置（例如div），然後在您的tooltips.custom函數中使用該容器。

下面是一個示例，我使用自定義工具提示在圖表中間顯示了懸停的餅圖部分百分比。在這個例子中，我在id爲「chartjs-tooltip」的div中生成了我的工具提示。請注意，我如何與tooltips.custom函數中的div交互來定位和更改值。

此外，檢查工具提示是否應該隱藏的正確方法是檢查它是不透明的。該工具提示對象將一直存在，但是當它不應該是可見的，不透明度設置爲0

Chart.defaults.global.tooltips.custom = function(tooltip) { 
    // Tooltip Element 
    var tooltipEl = document.getElementById('chartjs-tooltip'); 

    // Hide if no tooltip 
    if (tooltip.opacity === 0) { 
    tooltipEl.style.opacity = 0; 
    return; 
    } 

    // Set Text 
    if (tooltip.body) { 
    var total = 0; 

    // get the value of the datapoint 
    var value = this._data.datasets[tooltip.dataPoints[0].datasetIndex].data[tooltip.dataPoints[0].index].toLocaleString(); 

    // calculate value of all datapoints 
    this._data.datasets[tooltip.dataPoints[0].datasetIndex].data.forEach(function(e) { 
     total += e; 
    }); 

    // calculate percentage and set tooltip value 
    tooltipEl.innerHTML = '<h1>' + (value/total * 100) + '%</h1>'; 
    } 

    // calculate position of tooltip 
    var centerX = (this._chartInstance.chartArea.left + this._chartInstance.chartArea.right)/2; 
    var centerY = ((this._chartInstance.chartArea.top + this._chartInstance.chartArea.bottom)/2); 

    // Display, position, and set styles for font 
    tooltipEl.style.opacity = 1; 
    tooltipEl.style.left = centerX + 'px'; 
    tooltipEl.style.top = centerY + 'px'; 
    tooltipEl.style.fontFamily = tooltip._fontFamily; 
    tooltipEl.style.fontSize = tooltip.fontSize; 
    tooltipEl.style.fontStyle = tooltip._fontStyle; 
    tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; 
}; 

下面是完整的codepen example。

我希望能幫助清理一下！