問題描述

我有一個 highcharts 圖表，我允許用戶動態創建他們自己的標志.現在我希望能夠單擊標志本身并能夠一直顯示它的工具提示，直到我再次單擊該標志.這樣做的原因是為了讓用戶給點賦予特殊的含義，當他們將圖形保存為圖像時，我希望它顯示他們留下的工具提示信息.

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"
                }
            }
        },

推薦答案

我剛剛搞定了這個.當您單擊一個點時，它將保留工具提示.它通過克隆工具提示 svg 元素并將其附加到繪圖來做到這一點.

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.

這是一個小提琴.

$(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 - 保持工具提示在點擊時顯示的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！