Highcharts: display multiple tooltips by click and vice versa

问题

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!

回答1:

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/

来源：https://stackoverflow.com/questions/16169997/highcharts-display-multiple-tooltips-by-click-and-vice-versa

标签

Highcharts

tooltip