使用HighCharts为点或永久标签创建粘性工具提示

时间:2011-11-23 11:11:00

标签: javascript api charts highcharts

我正在尝试为特定点创建永久工具提示, 说永久物是什么意思::我的意思是它总是被展示出来,不仅在徘徊时,而且在所有时间。 我也对那里显示的标签开放,但我需要它与那个确切的点相关,而不是相对X-Y css定位到图表对象的位置,因为图表宽度是动态的。

例子: 系列:[{name:'Anger',

数据:[{y:9,x:Date.UTC(2011,10,5),名称:'USD to EUR',marker:{symbol:'url(sun.png)',label:'123 ',sticky-tooltip:true}}]

当然这不会奏效,但我希望你明白我想要实现的目标。

感谢您的帮助。

对于那些看到完整档案的人来说:

        var chart;

        $(document).ready(function() { 

            chart = new Highcharts.Chart({

                chart: {

                    renderTo: 'container',

                    defaultSeriesType: 'spline',

                },

                title: {

                    text: 'Emotions graph',

                    style: {

                        position: 'relative',

                    },

                    x: 20, //center,

                    y: 8 ,

                },

                subtitle: {

                    text: ' ',

                    x: -20

                },

                xAxis: {

                    type: 'datetime',

                    dateTimeLabelFormats: { day: '%e.  %b' },

                    tickInterval:24 * 3600 * 1000 * 7,

                    showLastLabel : true,

                    maxPadding:0,

                    minPadding:0

                },

                yAxis: {

                    max :10,

                    title: { text: 'Emotion level' },

                },

                tooltip: {

                    enabled:true,                       

                    formatter: function() {

                        var month=new Array(12);

                        month[0]="January";

                        month[1]="February";

                        month[2]="March";

                        month[3]="April";

                        month[4]="May";

                        month[5]="June";

                        month[6]="July";

                        month[7]="August";

                        month[8]="September";

                        month[9]="October";

                        month[10]="November";

                        month[11]="December";

                        var temptime = new Date(this.x);



                        if (this.point.name != null ) { thename =   this.point.name + '<br/>'; }  else { thename ='' };                     

                        return thename + '<b>'+ this.series.name +'</b><br/>Level of: '+

                        this.y + '<br/>Date: ' + temptime.getDate() + ' of ' + month[temptime.getMonth() ]  ;

                    }

                },

                legend: {

                    style: { padding: 30 },

                    align: 'center',

                    verticalAlign: 'top',

                    y: 15,

                    floating: true,

                    borderWidth: 0

                },

                credits: { enabled: false },

                series: [{

                    name: 'Excitment',

                    lineWidth: 2 ,

                    data: [

                        [Date.UTC(2011,  9, 27), 7],

                        [Date.UTC(2011,  9, 20), 6],

                        [Date.UTC(2011,  9, 21), 7],

                        [Date.UTC(2011, 10,  2), 8],

                        [Date.UTC(2011, 10,  9), 6],

                        [Date.UTC(2011, 10, 16), 6],

                        [Date.UTC(2011, 10, 14), 7],

                        [Date.UTC(2011, 10,  1), 1],

                        [Date.UTC(2011,  9, 24), 2],

                        [Date.UTC(2011, 10,  4), 9],

                        [Date.UTC(2011, 10, 11), 7],

                        [Date.UTC(2011, 10, 15), 7],

                        [Date.UTC(2011,  9, 25), 6],

                        [Date.UTC(2011, 10,  2), 7],

                        [Date.UTC(2011, 10,  6), 2],

                        [Date.UTC(2011, 10, 13), 8],

                        [Date.UTC(2011, 10,  3), 1],

                        [Date.UTC(2011,  9, 26), 1],

                        [Date.UTC(2011, 10,  9), 5],

                        [Date.UTC(2011, 10, 12), 6]

                    ]

                    },{

                    name: 'Tranquility',

                    lineWidth: 2,

                    data: [

                        [Date.UTC(2011, 10, 18), 2],

                        [Date.UTC(2011,  9, 26), 2],

                        [Date.UTC(2011, 10,  1), 4],

                        [Date.UTC(2011, 10, 11), 5],

                        [Date.UTC(2011,  9, 21), 5],

                        [Date.UTC(2011, 10, 12), 9],

                        [Date.UTC(2011,  9, 25), 5],

                        [Date.UTC(2011, 10,  4), 4],

                        [Date.UTC(2011, 10,  9), 1],

                        [Date.UTC(2011, 10, 13), 5],

                        [Date.UTC(2011, 10, 19), 6],

                        [Date.UTC(2011,  9, 25), 6],

                        [Date.UTC(2011,  9, 31), 3],

                        [Date.UTC(2011, 10,  7), 3]

                    ]

                    }, {

                    name: 'Happiness',

                    lineWidth: 2 ,

                    data: [

                        [Date.UTC(2011, 10,  9), 5],

                        [Date.UTC(2011,  9, 20), 5],

                        [Date.UTC(2011,  9, 28), 5],

                        [Date.UTC(2011, 10, 12), 6],

                        [Date.UTC(2011, 10,  1), 5],

                        [Date.UTC(2011,  9, 24), 5],

                        [Date.UTC(2011,  9, 29), 7],

                        [Date.UTC(2011, 10, 18), 4],

                        [Date.UTC(2011,  9, 24), 9],

                        [Date.UTC(2011,  9, 22), 3],

                        [Date.UTC(2011,  9, 21), 3]

                    ]

                    },{

                    name: 'Anger',

                    lineWidth: 2,

                    data: [

                        [Date.UTC(2011,  9, 28), 4],

                        [Date.UTC(2011,  9, 26), 2],

                        [Date.UTC(2011, 10,  1), 4],

                        [Date.UTC(2011, 10, 11), 5],

                        [Date.UTC(2011,  9, 25), 8],

                        [Date.UTC(2011,  9, 27), 3],

                        [Date.UTC(2011,  9, 30), 8],

                        [Date.UTC(2011,  9, 29), 3],

                        { y:  9, x: Date.UTC(2011,  10, 5), name: 'USD to EUR', marker: { symbol: 'url(sun.png)', label: '123' } },

                        [Date.UTC(2011,  9, 27), 4],

                        [Date.UTC(2011, 10, 18), 5],

                        [Date.UTC(2011, 10, 13), 7],

                        [Date.UTC(2011, 10, 19), 6],

                        [Date.UTC(2011,  9, 25), 6],

                        [Date.UTC(2011, 10, 12), 3],

                        [Date.UTC(2011,  9, 26), 4]

                    ]

                    },{

                    name: 'Average',

                    lineWidth: 2,

                    data: [

                        { y:  9, x: Date.UTC(2011,  9, 31), marker: { symbol: 'url(snow.png)' } },

                        [Date.UTC(2011,  9, 20), 4],

                        [Date.UTC(2011,  9, 22), 2],

                        [Date.UTC(2011, 10, 20), 4],

                        [Date.UTC(2011, 10, 16), 5],

                        [Date.UTC(2011,  9, 29), 8],

                        [Date.UTC(2011,  9, 28), 3],

                        [Date.UTC(2011,  9, 29), 9],

                        [Date.UTC(2011, 10, 08), 7],

                        [Date.UTC(2011, 10, 17), 6],

                        [Date.UTC(2011,  9, 23), 6],

                        [Date.UTC(2011, 10, 12), 3],

                        [Date.UTC(2011,  9, 27), 4]

                    ]

                    }

                ] 



            });





        });

1 个答案:

答案 0 :(得分:5)

使用HighCharts chart.renderer()功能可以实现这一点。

尝试使用HighCharts API参考中的 JSFiddle JSFiddle 。两者都展示了如何使用渲染器在图表上书写文本或文本框并将其锚定到某一点。