Question

Chart.js 2.2.1

知道如何触发当我将鼠标悬停在数据点上时运行的代码，以及当我将鼠标移开时运行的代码吗？我需要以编程方式显示和隐藏图表的工具提示。

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

如果可以，我会展示示例代码，但我甚至不知道从哪里开始。 chart method docs天堂没有帮助。

JSFiddle

Answer 1

以下代码将处理一个或多个工具提示。

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

@BeetleJuice提供的完整解决方案 - https://jsfiddle.net/ucvvvnm4/5/

Answer 2

我将谨慎地访问/修改以_开头的私有变量。您可能会发现自己的行为异常。为什么不触发画布mousemove事件

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

  },

要关闭工具提示，只需触发mouseout事件

  closeToolTip: function(myChart) {

    var mouseOutEvent = new MouseEvent('mouseout');
    return myChart.canvas.dispatchEvent(mouseOutEvent);

  }

以编程方式打开和关闭Chart.js工具提示

2 个答案: