Programmatically open and close Chart.js tooltip

后端 未结 2 884
伪装坚强ぢ
伪装坚强ぢ 2021-02-09 10:41

Chart.js 2.2.1

Any idea how to trigger the code that runs when I hover over a datapoint, and that runs when I move the mouse off? I need to programmaticall

相关标签:
2条回答
  • 2021-02-09 11:01

    I would be careful accessing/modifying private variables that begin with _. You may find yourself with unexpected behavior. Why not trigger the canvas mousemove event

      openToolTip: function(myChart, index) {
    
        var mouseMoveEvent, meta, point, rectangle, value;
    
        meta = myChart.getDatasetMeta(0);
        rectangle = myChart.canvas.getBoundingClientRect();
        point = meta.data[index].getCenterPoint();
    
        mouseMoveEvent = new MouseEvent('mousemove', {
          clientX: rectangle.left + point.x,
          clientY: rectangle.top + point.y
        });
    
        myChart.canvas.dispatchEvent(mouseMoveEvent);
    
      },
    

    To close the tooltip just trigger the mouseout event

      closeToolTip: function(myChart) {
    
        var mouseOutEvent = new MouseEvent('mouseout');
        return myChart.canvas.dispatchEvent(mouseOutEvent);
    
      }
    
    0 讨论(0)
  • 2021-02-09 11:17

    The code below will handle one or more tooltips.

    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();
    }
    

    Complete solution provided by @BeetleJuice - https://jsfiddle.net/ucvvvnm4/5/

    0 讨论(0)
提交回复
热议问题