使用 HighCharts 为点或永久标签创建粘性工具提示
Posted
技术标签:
【中文标题】使用 HighCharts 为点或永久标签创建粘性工具提示【英文标题】：create a sticky tooltip for a point or a permanent label using HighCharts 【发布时间】：2011-11-23 11:10:59 【问题描述】：我正在尝试为特定点创建永久工具提示， 我所说的永久是什么意思:: 我的意思是它总是会显示，不仅在悬停时，而且一直显示。 我也对在那里显示的标签开放，但我需要它与那个确切的点相关，而不是通过相对于图表对象的 X-Y css 定位来定位，因为图表宽度是动态的。
例子： 系列：[名称：'愤怒'，
data: [ y: 9, x: Date.UTC(2011, 10, 5), name: '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】：这可以使用 HighCharts chart.renderer() 功能实现。
试试 HighCharts API 参考中的 JSFiddle 和 JSFiddle。两者都展示了如何使用渲染器在图表上写入文本或文本框并将其锚定到一个点。
【讨论】：
@Dr.酷，嘿，你能看看我的类似问题吗？ ***.com/questions/24513784/…以上是关于使用 HighCharts 为点或永久标签创建粘性工具提示的主要内容，如果未能解决你的问题，请参考以下文章