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

时间:2017-05-28 15:17:57

标签: javascript jquery html css canvasjs

我正在使用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 个答案:

答案 0 :(得分:1)

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

类似的东西:

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

Updated jsFiddle