Javascript 使用HighCharts为点或永久标签创建粘性工具提示
我正在尝试为特定点创建永久性工具提示， 我说永久是什么意思？我的意思是，它总是会被显示出来，不仅是在悬停的时候，而且是在任何时候。 我也打开一个标签显示在那里，但我需要它是相关的确切点，而不是相对的X-Y css定位到图表对象的位置，因为图表宽度是动态的 示例： 系列：[{name:'Anger' 数据：[{y:9，x:Date.UTC（2011，10，5），名称：“美元兑欧元”，标记：{symbol:'url（sun.png）”，标签：“123”，粘贴工具提示：true}] 当然，这是行不通的，但我希望你明白我在努力实现什么 谢谢你的帮助 对于希望查看完整文件的用户：Javascript 使用HighCharts为点或永久标签创建粘性工具提示,javascript,api,charts,highcharts,Javascript,Api,Charts,Highcharts,我正在尝试为特定点创建永久性工具提示， 我说永久是什么意思？我的意思是，它总是会被显示出来，不仅是在悬停的时候，而且是在任何时候。 我也打开一个标签显示在那里，但我需要它是相关的确切点，而不是相对的X-Y css定位到图表对象的位置，因为图表宽度是动态的 示例： 系列：[{name:'Anger' 数据：[{y:9，x:Date.UTC（2011，10，5），名称：“美元兑欧元”，标记：{symbol:'url（sun.png）”，标签：“123”，粘贴工具提示：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]
]
}
]
});
});
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
defaultSeriesType:“样条线”，
},
标题：{
文本：“情绪图”，
风格：{
位置：'相对'，
},
x:20，//中间，
y:8，
},
副标题:{
文本：“”，
x:-20
},
xAxis：{
键入：“日期时间”，
dateTimeLabelFormats:{day:'%e.%b'}，
时间间隔：24*3600*1000*7，
showLastLabel:true，
maxPadding:0，
最小填充：0
},
亚克斯：{
最高：10，
标题：{text:'emotional level'}，
},
工具提示：{
启用：对，
格式化程序：函数（）{
var月=新数组（12）；
月[0]=“一月”；
月[1]=“2月”；
月[2]=“三月”；
月[3]=“4月”；
月[4]=“五月”；
月[5]=“6月”；
月[6]=“7月”；
月[7]=“8月”；
月[8]=“9月”；
月[9]=“10月”；
月[10]=“11月”；
月[11]=“12月”；
var TENTIME=新日期（this.x）；
如果（this.point.name！=null）{thename=this.point.name+'
；}否则{thename=''''}；
返回name+''+this.series.name+'
级别：'+
此.y+'
日期：'+fettime.getDate（）+'的'+month[fettime.getMonth（）]；
}
},
图例：{
样式：{padding:30}，
对齐：'居中'，
垂直排列：“顶部”，
y:15，
浮动：是的，
边框宽度：0
},
信用证：{已启用：错误}，
系列：[{
名称：'激励'，
线宽：2，
数据：[
[UTC日期（2011年9月27日），7]，
[UTC日期（2011年9月20日），6]，
[UTC日期（2011年9月21日），7]，
[UTC日期（2011年10月2日），8]，
[UTC日期（2011年10月9日），6]，
[UTC日期（2011年10月16日），6]，
[UTC日期（2011年10月14日），7]，
[UTC日期（2011年10月1日），1]，
[UTC日期（2011年9月24日），2]，
[UTC日期（2011年10月4日），9]，
[UTC日期（2011年10月11日），7]，
[UTC日期（2011年10月15日），7]，
[UTC日期（2011年9月25日），6]，
[UTC日期（2011年10月2日），7]，
[UTC日期（2011年10月6日），2]，
[UTC日期（2011年10月13日），8]，
[UTC日期（2011年10月3日），1]，
[UTC日期（2011年9月26日），1]，
[UTC日期（2011年10月9日），5]，
[UTC日期（2011年10月12日），6]
]
},{
名称:"宁静",，
线宽：2，
数据：[
[UTC日期（2011年10月18日），2]，
[UTC日期（2011年9月26日），2]，
[UTC日期（2011年10月1日），4]，
[UTC日期（2011年10月11日），5]，
[UTC日期（2011年9月21日），5]，
[UTC日期（2011年10月12日），9]，
[UTC日期（2011年9月25日），5]，
[UTC日期（2011年10月4日），4]，
[UTC日期（2011年10月9日），1]，
[UTC日期（2011年10月13日），5]，
[UTC日期（2011年10月19日），6]，
[UTC日期（2011年9月25日），6]，
[UTC日期（2011年9月31日），3]，
[UTC日期（2011年10月7日），3]
]
}, {
名字:"幸福",，
线宽：2，
数据：[
[UTC日期（2011年10月9日），5]，
[UTC日期（2011年9月20日），5]，
[UTC日期（2011年9月28日），5]，
[UTC日期（2011年10月12日），6]，
[UTC日期（2011年10月1日），5]，
[UTC日期（2011年9月24日），5]，
[UTC日期（2011年9月29日），7]，
[UTC日期（2011年10月18日），4]，
[UTC日期（2011年9月24日），9]，