如何一次只显示一个工具提示

Question

我正在使用 canvas js。我有饼图和圆环图。使用工具提示有一点问题。如果我将鼠标悬停在圆环图和饼图上，我可以看到这两个图表的工具提示。像这样

-

这里是 link jsfiddle

代码非常简单 - HTML

<div id="parent">
  <div id="doughnutContainer" uniqueID ='doughnut'></div>
  <div id="pieContainer" uniqueID ='pie'></div>
</div>

使用数据创建图表 -

var chart1 = new CanvasJS.Chart("doughnutContainer",
{        
    data: [
    {
        type: "doughnut",
        dataPoints: [
            { y: 71 },
            { y: 55 },
            { y: 50 },
            { y: 65 },
            { y: 95 },
            { y: 68 },
            { y: 28 },
            { y: 34 },
            { y: 14 }
        ]
    },

    ]
});
var chart2 = new CanvasJS.Chart("pieContainer",
{        
    backgroundColor: "transparent",
    data: [
    {
        type: "pie",
        dataPoints: [
            { y: 71 },
            { y: 55 },
            { y: 50 },
            { y: 65 },
            { y: 95 },
            { y: 68 },
            { y: 28 },
            { y: 34 },
            { y: 14 }
        ]
    }
    ]
});

chart1.render();
chart2.render();

谁能帮我解决这个问题。谢谢

Answer 1

您可以通过在将鼠标悬停在另一个图表上时隐藏工具提示来实现一个简单的 JQuery 技巧。

类似于：

$("#pieContainer").hover(function(){
        $("#doughnutContainer .canvasjs-chart-tooltip").hide();
    }
);

Updated jsFiddle

如何一次只显示一个工具提示

How to show only one tool tip at a time

javascript

jquery

html

css

canvasjs