ChartsJS：カスタムツールチップを常に表示

Question

私のウェブサイトで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が決して falseであることで、このために私のカスタムツールチップが常に表示されます。

このJSFiddle（42行が実行されることはありません）

質問を参照してください：はそれがtooltipがfalseになることはありませんバグですか、私が何かをしないのですか？

Answer 1

カスタムツールチップオプションは、HTLM/CSSを使用してキャンバスの範囲外で（独自のツールチップを使用しないで）独自のツールチップを作成/スタイルする場合に使用します。

これを行うには、キャンバスの外にツールチップ（たとえばdiv）を含む場所を定義してから、そのコンテナをtooltips.custom関数内で使用する必要があります。

ここでは、カスタムツールチップを使用して、チャートの中央にホールドされた円グラフのセクションの割合を表示する例を示します。この例では、idが "chartjs-tooltip"のdivの中にツールチップを生成しています。私のtooltips.custom機能でこのdivとどのようにやり取りして、値を配置して変更するのかを確認してください。

また、ツールチップを非表示にするかどうかを確認する正しい方法は、不透明度をチェックすることです。ツールヒントオブジェクトは常に存在するが、それは見えてはならない場合、不透明度はここで完全codepen exampleが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'; 
}; 

に設定されています。

私は物事をクリアするのに役立つことを願っています！