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

8oomwypt  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(244)

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

  1. openTip(oChart, datasetIndex, pointIndex){
  2. // how to open a specific tooltip?
  3. }
  4. closeTip(oChart, datasetIndex, pointIndex){
  5. // how to close the same tooltip?
  6. }

如果可以的话,我会展示示例代码,但是我甚至不知道从哪里开始。图表方法文档没有帮助。
JSFiddle

monwx1rj

monwx1rj1#

我会小心地访问/修改以_开始的私有变量。您可能会发现自己有意外的行为。为什么不触发canvas mousemove事件呢

  1. function openToolTip (myChart, index) {
  2. var mouseMoveEvent, meta, point, rectangle, value;
  3. meta = myChart.getDatasetMeta(0);
  4. rectangle = myChart.canvas.getBoundingClientRect();
  5. point = meta.data[index].getCenterPoint();
  6. mouseMoveEvent = new MouseEvent('mousemove', {
  7. clientX: rectangle.left + point.x,
  8. clientY: rectangle.top + point.y
  9. });
  10. myChart.canvas.dispatchEvent(mouseMoveEvent);
  11. },

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

  1. function closeToolTip (myChart) {
  2. var mouseOutEvent = new MouseEvent('mouseout');
  3. return myChart.canvas.dispatchEvent(mouseOutEvent);
  4. }
展开查看全部
of1yzvn4

of1yzvn42#

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

  1. function openTip(oChart,datasetIndex,pointIndex){
  2. if(window.oChart.tooltip._active == undefined)
  3. window.oChart.tooltip._active = []
  4. var activeElements = window.oChart.tooltip._active;
  5. var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
  6. for(var i = 0; i < activeElements.length; i++) {
  7. if(requestedElem._index == activeElements[i]._index)
  8. return;
  9. }
  10. activeElements.push(requestedElem);
  11. //window.oChart.tooltip._view.body = window.oChart.getDatasetMeta(datasetIndex).data;
  12. window.oChart.tooltip._active = activeElements;
  13. window.oChart.tooltip.update(true);
  14. window.oChart.draw();
  15. }
  16. function closeTip(oChart,datasetIndex,pointIndex){
  17. var activeElements = window.oChart.tooltip._active;
  18. if(activeElements == undefined || activeElements.length == 0)
  19. return;
  20. var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
  21. for(var i = 0; i < activeElements.length; i++) {
  22. if(requestedElem._index == activeElements[i]._index) {
  23. activeElements.splice(i, 1);
  24. break;
  25. }
  26. }
  27. window.oChart.tooltip._active = activeElements;
  28. window.oChart.tooltip.update(true);
  29. window.oChart.draw();
  30. }

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

展开查看全部
bvjxkvbb

bvjxkvbb3#

对于Chart.js@3,以下是官方解决方案:https://www.chartjs.org/docs/latest/samples/advanced/programmatic-events.html

  1. function triggerTooltip(chart) {
  2. const tooltip = chart.tooltip;
  3. if (tooltip.getActiveElements().length > 0) {
  4. tooltip.setActiveElements([], {x: 0, y: 0});
  5. } else {
  6. const chartArea = chart.chartArea;
  7. tooltip.setActiveElements([
  8. {
  9. datasetIndex: 0,
  10. index: 2,
  11. }, {
  12. datasetIndex: 1,
  13. index: 2,
  14. }
  15. ],
  16. {
  17. x: (chartArea.left + chartArea.right) / 2,
  18. y: (chartArea.top + chartArea.bottom) / 2,
  19. });
  20. }
  21. chart.update();
  22. }
展开查看全部

相关问题