2016-09-02 2 views
2

Chart.js 2.2.1プログラムで開閉Chart.jsのツールチップ

私がデータポイント上にカーソルを移動したときに実行される、と私は、マウスをオフに移動したときにそれが実行されるコードをトリガーする方法任意のアイデア?グラフのツールチップをプログラムで表示および非表示にする必要があります。

openTip(oChart, datasetIndex, pointIndex){ 
    // how to open a specific tooltip? 
} 
closeTip(oChart, datasetIndex, pointIndex){ 
    // how to close the same tooltip? 
} 

可能であればサンプルコードを表示しますが、どこから開始するかはわかりません。 chart method docsは役に立ちませんでした。

JSFiddle

+0

私はコードのような溶液にこれを時間を持っていないが、あなたのフィドルに、多分あなたはmouseoverイベントを作成することができますし、pageXとpageY座標でそれをトリガーあなたが見たいバーのツールチップの基本的に、あなたが見たいバーのツールチップのmouseoverイベントをシミュレートします。私はどのようにあなたがデータセットを交換することができるか分からない。おそらく、チャート要素に対してupdateメソッドを呼び出さなければならないでしょう。私は明日これを再訪します。うまくいけば助けてくれます。 – gautsch

+0

@ gautschは提案を感謝します。チャートのプロパティとメソッドに直接プラグインするソリューションを期待していました。以下のRaghavの答えを見てください – BeetleJuice

答えて

5

以下のコードは、1つまたは複数のツールチップを処理します。 @BeetleJuiceによって提供さ

function openTip(oChart,datasetIndex,pointIndex){ 
    if(window.oChart.tooltip._active == undefined) 
     window.oChart.tooltip._active = [] 
    var activeElements = window.oChart.tooltip._active; 
    var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex]; 
    for(var i = 0; i < activeElements.length; i++) { 
     if(requestedElem._index == activeElements[i]._index) 
      return; 
    } 
    activeElements.push(requestedElem); 
    //window.oChart.tooltip._view.body = window.oChart.getDatasetMeta(datasetIndex).data; 
    window.oChart.tooltip._active = activeElements; 
    window.oChart.tooltip.update(true); 
    window.oChart.draw(); 
} 

function closeTip(oChart,datasetIndex,pointIndex){ 
    var activeElements = window.oChart.tooltip._active; 
    if(activeElements == undefined || activeElements.length == 0) 
    return; 
    var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex]; 
    for(var i = 0; i < activeElements.length; i++) { 
     if(requestedElem._index == activeElements[i]._index) { 
      activeElements.splice(i, 1); 
      break; 
     } 
    } 
    window.oChart.tooltip._active = activeElements; 
    window.oChart.tooltip.update(true); 
    window.oChart.draw(); 
} 

完全なソリューション - https://jsfiddle.net/ucvvvnm4/5/

+0

私の良さRaghav私は私自身でそこに得たとは思わない。ありがとう、トン。それが良い考えだと思うなら、この更新されたJSFiddleをあなたの答えに自由に追加してください:https://jsfiddle.net/ucvvvnm4/5/。 * * – BeetleJuice

関連する問題