javascript - 获取位置标记线图highcharts
问题描述
以下示例中是否有机会使用 Highcharts 获取标记圆圈的确切位置?
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x',
panning: true,
panKey: 'shift',
scrollablePlotArea: {
minWidth: 600
}
},
title: {
text: '2017 Tour de France Stage 8: Dole - Station des Rousses'
},
subtitle: {
text: 'An annotated chart in Highcharts'
},
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 15
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 27.98,
y: 255
},
text: 'Arbois'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 45.5,
y: 611
},
text: 'Montrond'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 63,
y: 651
},
text: 'Mont-sur-Monnet'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 84,
y: 789
},
x: -10,
text: 'Bonlieu'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 129.5,
y: 382
},
text: 'Chassal'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 159,
y: 443
},
text: 'Saint-Claude'
}]
}, {
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 101.44,
y: 1026
},
x: -30,
text: 'Col de la Joux'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 138.5,
y: 748
},
text: 'Côte de Viry'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 176.4,
y: 1202
},
text: 'Montée de la Combe<br>de Laisia Les Molunes'
}]
}, {
labelOptions: {
shape: 'connector',
align: 'right',
justify: false,
crop: true,
style: {
fontSize: '0.8em',
textOutline: '1px white'
}
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 96.2,
y: 783
},
text: '6.1 km climb<br>4.6% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 134.5,
y: 540
},
text: '7.6 km climb<br>5.2% on avg.'
}, {
point: {
xAxis: 0,
yAxis: 0,
x: 172.2,
y: 925
},
text: '11.7 km climb<br>6.4% on avg.'
}]
}],
xAxis: {
labels: {
format: '{value} km'
},
minRange: 5,
title: {
text: 'Distance'
}
},
yAxis: {
startOnTick: true,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
labels: {
format: '{value} m'
}
},
tooltip: {
headerFormat: 'Distance: {point.x:.1f} km<br>',
pointFormat: '{point.y} m a. s. l.',
shared: true
},
legend: {
enabled: false
},
series: [{
data: elevationData,
lineColor: Highcharts.getOptions().colors[1],
color: Highcharts.getOptions().colors[2],
fillOpacity: 0.5,
name: 'Elevation',
marker: {
enabled: false
},
threshold: null
}]
});
我想要的是当用户点击图表时,获取标记圆圈位置
它用于注释插件,获取该点或圆的坐标,并在那里创建一个注释
为了清楚起见,这一点:
解决方案
我使用数据数组解决了我的问题,并使用以下代码
events:{
click: function(e){
var x = e.xAxis[0].value,
y = elevationData[x.toFixed(1)*10][1];
this.addAnnotation({
xValue: x,
yValue: y,
allowDragX: false,
allowDragY: false,
title:{
text: "Hola"
} ,
shape: 'text'
});
//this.redraw();
this.redrawAnnotations();
console.log(this.annotations);
}
}
推荐阅读
- php - Symfony - 当我去 /login 时总是退出
- python - 无法在 Django 项目中显示用户名
- python-3.x - 关于 pandas .drop 方法的结构问题
- spring-boot - Spring Boot 应用程序返回对“myURL”处的 XMLHttpRequest 的访问已被 CORS 策略阻止
- python - 无法从 Python 脚本打开终端
- ubuntu - Ubuntu 20.04 phpmyadmin 不起作用
- python - 为什么即使满足条件,这个布尔值也不为真?
- windows - New-Cluster 远程安装windows故障转移集群
- html - Trying to extract a piece of html code using regex
- paypal - Squarespace + PayPal - 自定义表单,显示总计的费用增加问题