Highcharts - 保持点击显示工具提示 [英] Highcharts - Keep tooltip showing on click

问题描述

我有一张高图，我允许用户动态创建自己的标志。现在我想能够点击国旗本身，并能够保持它的工具提示显示整个时间，直到我再次点击国旗。原因是为了让用户给点赋予特殊的含义，当他们将图形保存为图像时，我希望它显示留下的工具提示信息。

任何人都知道如何做到这一点或去做这件事？我无法弄清楚如何访问标志工具提示

  plotOptions：{
系列：{
 allowPointSelect：true，
动画：false，
 dataGrouping：{
 force：true，
平滑：true 
} 
}，
 line ：{
 allowPointSelect：true，
 animation：false，
 point：{
 events：{
 click：function（）{
 var thePoint = this ; 
 var previousFlag = findFlag（thePoint）; 
 if（previousFlag！= null）{
 previousFlag.remove（）; 
} else {
 createFlagForm（thePoint）; 
} 
} 
} 
} 
}，
标记：{
 point：{
 events：{
点击：function（）{
 //如何访问工具提示？这意味着标记点本身
} 
} 
}，
 tooltip：{
 useHTML：true，
 xDateFormat：％B-％e- ％Y％H：％M
} 
} 
}，
  

解决方案

我只是鞭打了这件事。当你点击一个点时，它会持续工具提示。它通过克隆tooltip svg元素并将其附加到图上来实现。

这是一个 fiddle 。

  $（function（）{
 cloneToolTip = null; 
 chart = new Highcharts.Chart（{
图：{
 renderTo：'container'
}，
 xAxis：{
 categories： ['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
 $，
 
 plotOptions：{
 series：{
 cursor：'pointer'，
 point：{
 events：{
单击：function（）{
 if（cloneToolTip）
 {
 chart.container.firstChild.removeChild（cloneToolTip）; 
 } 
 cloneToolTip = this.series.chart.tooltip.label.element.cloneNode（true）; 
 chart.container.firstChild.appendChild（cloneToolTip）; 
} 
} 
} 
} 
}，
 
系列：[{
数据：[29.9,71.5,106.4 ，129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
}] 
}）; 
}）; 
  

I have a highcharts graph, and I allowed the user to dynamically create their own Flags. Now I want to be able to click on the flag itself and be able to keep it's tooltip showing the whole time until I click on the flag again. The reason for this is to allow the user to give special meaning to points, and when they save the graph as an image, I want it to show the tooltip information they left on.

Anyone know how to do this or go about this? I can't figure out how to access the flags tooltip

plotOptions: {
            series: {
                allowPointSelect: true,
                animation: false,
                dataGrouping: {
                    force: true,
                    smoothed: true
                }
            },
            line: {
                allowPointSelect: true,
                animation: false,
                point: {
                    events: {
                        click: function () {
                            var thePoint = this;
                            var previousFlag = findFlag(thePoint);
                            if (previousFlag != null) {
                                previousFlag.remove();
                            } else {
                                createFlagForm(thePoint);
                            }
                        }
                    }
                }
            },
            flags: {
                point: {
                    events: {
                        click: function() { 
                            //How to access the tooltip? this means the flag point itself
                        }
                    }
                },
                tooltip: {
                    useHTML: true,
                    xDateFormat: "%B-%e-%Y %H:%M"
                }
            }
        },

解决方案

I just whipped this up. When you click a point it will persist the tooltip. It does this by cloning the tooltip svg element and appending it to the plot.

Here's a fiddle.

$(function () {
    cloneToolTip = null;
    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() { 
                            if (cloneToolTip)
                            {
                                chart.container.firstChild.removeChild(cloneToolTip);
                            }
                            cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                            chart.container.firstChild.appendChild(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]        
        }]
    });
});​

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