Question

有人可以在以下示例中向我显示

如何在2个图中实现工具提示，所以当我将鼠标悬停在一个图中的“系列1”上时，它将在两个图中显示“系列1”的工具提示？

非常感谢您的帮助和考虑。

function showTooltip(x, y, contents, z) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 30,
        left: x - 11,
        'font-weight': 'bold',
        border: '1px solid rgb(255, 221, 221)',
        padding: '2px',
        'background-color': z,
        opacity: '0.8'
    }).appendTo("body").show();
}


 var previousPoint = null;
 $(".chart").bind("plothover", function (event, pos, item) {
     if (item) {
         if (previousPoint != item.datapoint) {
             previousPoint = item.datapoint;

             $("#tooltip").remove();
             var x = item.datapoint[0],
             y = item.datapoint[1] - item.datapoint[2];

             showTooltip(item.pageX, item.pageY, item.series.label, item.series.color);             
         }
     } else {
         $("#tooltip").remove();
         previousPoint = null;
     }
 });

Answer 1

这是一个例子。它将在任何匹配的系列标签和x数据点值的两个图上创建工具提示：

$(".chart").bind("plothover", function (event, pos, item) {
    if (item){
        $(".tooltip").remove(); // remove previous tooltips
        var label = item.series.label;
        $([plot1, plot2]).each(function(i,plotObj){ // loop our plots
            var someData = plotObj.getData();
            for (var i=0; i<someData.length; i++){
                if (someData[i].label == label){ // found matching series label
                    for (var j = 0; j < someData[i].data.length; j++){
                        var point = someData[i].data[j];
                        if (point[0] == item.datapoint[0]){ // found matching x point
                            var somePos = plotObj.pointOffset({x: point[0], y: point[1]}); // position of point in plot 
                            var divPos = plotObj.getPlaceholder().offset(); //position of div on page
                            showTooltip(somePos.left+divPos.left, somePos.top+divPos.top, label, item.series.color); // create tooltip
                        }
                    }
                }                
            }               
        });
    }        
});

工作小提琴here。

在多个图上应用工具提示

1 个答案: