2017-05-28 100 views
0

我正在使用canvas js。我有饼图和圆环图。使用工具提示有点问题。如果我将鼠标悬停在圆环图上,然后在饼图上看到两个图表的工具提示。像这样如何一次只显示一个工具提示

- See

这里是 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(); 

任何人都可以帮我解决这个问题。谢谢

回答

1

你可以做一个简单的JQuery技巧,通过隐藏图表的工具提示时,悬停在另一个。

类似:

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

Updated jsFiddle