2017-05-28 28 views
0

私はcanvas jsを使用しています。私は円グラフとドーナツチャートを持っています。ツールチップの使用には少し問題があります。ドーナツチャートと円グラフの上にカーソルを置くと、両方のチャートのツールチップが表示されます。 See一度に1つのツールチップのみを表示する方法

そしてここ 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

関連する問題