将标志工具提示移动到上侧

时间:2012-09-08 08:25:46

标签: highcharts

我有带标志的Highstock图表。一切都很好,但我想改变旗帜工具提示的位置。 (将标志的工具提示移动到标志的上侧)。此外,我还希望提供标记文本的链接" 测试测试",它将在新标签页中打开。谁能帮我?这是我的完整代码http://jsfiddle.net/anant_ghate/8byc9/1/

// Create the chart
    window.chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        tooltip: {
            positioner: function(boxWidth, boxHeight, point) {
                return {
                    x: point.plotX + 20,
                    y: point.plotY + -20
                };
            },
            shared:true,
            formatter: function(){
                    var p = '';
                    if(this.point) {
                      p += '<span>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.point.x) +'</span><br/>';
                      p += '<b>'+ this.point.title + '</b>' // This will add the text on the flags
                    }
                    else {              
                      p += '<b>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.x) +'</b><br/>';
                      $.each(this.points, function(i, series){
                        p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y;
                      });

                    }
                    return p;
            },              
        },
        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'USD to EUR exchange rate'
        },

        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },

        series: [{
            name: 'USD to EUR',
            data: data,
            id: 'dataseries',
            tooltip: {
                yDecimals: 4
            }
        }, {
            type: 'flags',
            data: [{
                x: Date.UTC(2011, 1, 20),
                title: 'Test test'
            }, {
                x: Date.UTC(2011, 3, 20),
                title: 'Test test'
            }],
            onSeries: 'dataseries',
            allowPointSelect : true,
            shape: 'squarepin',
            y : -40         
        }]
    });

2 个答案:

答案 0 :(得分:0)

您可以像在此回答Highcharts tooltip always on right side of cursor

中一样调整工具提示

使用与此highcharts clickable labels how to goto anchor

类似的方法使标记可单击

答案 1 :(得分:0)

要在点击标记时重定向到网址,您可以在“点击事件”上创建一个功能: http://jsfiddle.net/8byc9/5/ 我认为仅仅为flag-tooltip创建自己的定位器并不容易为currencytooltip创建...