[英]How to show only one tool tip at a time
I am using canvas js. 我正在使用canvas js。 I am having pie chart and doughnut chart.
我有饼图和甜甜圈图。 There is a bit of problem in using tool tip.
使用工具提示时存在一些问题。 If I hover over doughnut chart and then pie chart I can see the tool tip of both the charts.
如果将鼠标悬停在甜甜圈图和饼图上,则可以看到两个图表的工具提示。 Like this
像这样
And here is link of jsfiddle 这是jsfiddle的链接
The code is pretty much simple - HTML 代码非常简单-HTML
<div id="parent">
<div id="doughnutContainer" uniqueID ='doughnut'></div>
<div id="pieContainer" uniqueID ='pie'></div>
</div>
Creating charts with data - 使用数据创建图表-
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();
Can anyone help me sort this issue out. 谁能帮我解决这个问题。 Thank you
谢谢
You can do a simple JQuery trick by hiding tooltip of a chart when hovering on another one. 将鼠标悬停在另一个图表上时,可以通过隐藏图表的工具提示来做一个简单的JQuery技巧。
something like: 就像是:
$("#pieContainer").hover(function(){
$("#doughnutContainer .canvasjs-chart-tooltip").hide();
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.