Highcharts：通过点击显示多个工具提示，反之亦然 [英] Highcharts: display multiple tooltips by click and vice versa

问题描述

• 点击点 - > tooltip被永久克隆并显示


• 如果您再次点击相同的点，克隆将被删除


• 允许同时显示多个工具提示

我工作的大部分东西都存在，但有一些小问题需要解决：

http://jsfiddle.net/jtnDz/1/

  $（function（）{
 cloneToolTip = null; 
 checkx = []; 
 checky = []; 
 clone = []; 
 del = []; 
 chart = new Highcharts.Chart（{
图：{
 renderTo：'container'
} ，
 xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep' ，'Oct'，'Nov'，'Dec'] 
}，
 
 plotOptions：{
系列：{
 cursor：'pointer'，
 point：{
 events：{
 click：function（）{
 //检查点是否已被点击
 if（checkx.indexOf（event.point.x）> = 1& checky.indexOf（event.point.y）> = 1）{
 //移除工具提示
 chart.container.firstChild.removeChild（clone [checkx.indexOf（event.point.x）]） ; 
 
 //移除xy坐标并从数组中克隆 - > tooltip可以再次显示
 /*del=checkx.indexOf (event.point.x）; 
 clone.splice（del，1）; 
 checky.splice（del，1）; 
 checkx.splice（del，1）; * / 
} 
 // cloneToolTip = null; 
 if（checkx.indexOf（event.point.x）== -1& checky.indexOf（event.point.y）== -1）{
 cloneToolTip = this.series.chart。 tooltip.label.element.cloneNode（真）; 
 chart.container.firstChild.appendChild（cloneToolTip）; 
 //保存坐标和工具提示对象
 checkx.push（event.point.x）; 
 checky.push（event.point.y）; 
 clone.push（cloneToolTip）; 
} 
} 
} 
} 
} 
}，
 
系列：[{
 data：[ 29.9，71.5，106.4，129.2，144.0，176.0，135.6，148.5，216.4，194.1，95.6，54.4] 
}] 
}）; 
  

}）;

我的问题是：

• 第一个选定的工具提示，也就是它的克隆，不能被移除


• 删除后，不能再次显示工具提示。我尝试删除所有三个数组中的相应条目（注释代码块），但是在更正后没有任何克隆被删除
我真的是一个初学者和谷歌很多找到例子，但这个问题我不能自己修复。有人可以给我一个提示吗？




谢谢！


解决方案

问题是从 inArray（）返回的值。它将返回数组的索引，所以它从 0 开始，而你的 if 语句与 1 。





另外，我做了一些其他更改（否则在Chrome中会出现一些错误）。例如： http://jsfiddle.net/7vkZV/




I search for a way to display a tooltip permanently:

• click on the point --> tooltip is cloned and displayed permanently
• if you click on the same point again, the clone is removed
• multiple tooltips are allowed to be displayed at the same time

Most of the things I got to work but there are some little issues that needs to be fixed:

http://jsfiddle.net/jtnDz/1/

$(function () {
cloneToolTip = null;
checkx = [];
checky = [];
clone = [];
del = [];
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        //check if point was already clicked
                        if (checkx.indexOf(event.point.x) >= 1 & checky.indexOf(event.point.y) >= 1) {
                            //remove tooltip
                            chart.container.firstChild.removeChild(clone[checkx.indexOf(event.point.x)]);

                            //remove xy coordinate and clone from array --> tooltip can be displayed again
                            /*del=checkx.indexOf(event.point.x);
                            clone.splice(del, 1);
                            checky.splice(del, 1);
                            checkx.splice(del, 1);*/
                        }
                        //cloneToolTip=null;
                        if (checkx.indexOf(event.point.x) == -1 & checky.indexOf(event.point.y) == -1) {
                            cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                            chart.container.firstChild.appendChild(cloneToolTip);
                            //save coordinates and tooltip object
                            checkx.push(event.point.x);
                            checky.push(event.point.y);
                            clone.push(cloneToolTip);
                        }
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

});

My problems are:

• the first selected tooltip, i.e. its clone, cannot be removed
• When a clone is removed, you cannot display the tooltip again permanently. I tried to remove the corresponding entries in all three arrays (commented code block) but then none of the clones is removed after this correction

I'm really a beginner and google a lot to find examples but this problem I could not fix on my own. Can someone give me a hint?

Thanks!

解决方案

The problem is with value returned from inArray(). It will return index of array, so it start from 0, while your if statement comapres with 1.

Also, I have made some other changes (otherwise in Chrome I get some errors). Example: http://jsfiddle.net/7vkZV/

这篇关于Highcharts：通过点击显示多个工具提示，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！