Jquery,Highcharts画出的图表怎么能通过点击图表触发事件？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery,Highcharts画出的图表怎么能通过点击图表触发事件？相关的知识，希望对你有一定的参考价值。
我用chart的点击事件，但是可点击的区域很小啊不是全图都可以触发，谁有好办法？
是全图触发，你确保下是在chart.events.click 触发。
你运行下我给的代码
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var options =
chart:
renderTo: 'container',
events:
click:function()
alert("test");
,
xAxis:
tickInterval: 1
,
series: [
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
]
;
$(document).ready(function()
var chart = new Highcharts.Chart(options);
);
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>追问
不行的，你点图片这个位置肯定不触发，只是点击X,Y坐标内的区域才可以！
为什么要在图表区域外触发呢?
追问使用的人，就是随手一点有时候没点到图表内就不能触发了啊！这样做起来不太好啊！然后我写一个点击DIV触动事件的方法也不好用，为什么DIV中是Highcharts的图表点击DIV事件不好用那？
追答你可以将图表区域尽量扩大，比如上面的图例就很占位置，将图例调整至图表区
追问主要我一个页面有多个图，点击哪个图哪个图变大，每个图的大小不可能很大！就这里有点小问题！但是还是很感谢你的帮助！谢谢！
参考技术A plotOptions :line:
point:
events :
click:function()
alert(this.options.url);
,
然后你在数据点加个url属性就可
我如何在Highcharts图表上使用动态数据？
我正在从页面上的Websocket连接接收数据，我想在Highcharts深度图上绘制该数据。
深度图：https://www.highcharts.com/docs/stock/depth-chart
这是我的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script language="javascript">
mySocket.onmessage = function(event) {
var data = JSON.parse(event.data);
rawAsks = data['asks']
rawBids = data['bids']
const asks = rawasks.map(x => x.map(y => parseFloat(y))) //DATA TO USE ON THE CHART
const bids = rawbids.map(x => x.map(y => parseFloat(y))) //DATA TO USE ON THE CHART
};
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'xy'
},
title: {
text: 'ETH-BTC Market Depth'
},
xAxis: {
minPadding: 0,
maxPadding: 0,
},
yAxis: [{
lineWidth: 1,
gridLineWidth: 1,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'left',
x: 8
}
}, {
opposite: true,
linkedTo: 0,
lineWidth: 1,
gridLineWidth: 0,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'right',
x: -8
}
}],
legend: {
enabled: false
},
plotOptions: {
area: {
fillOpacity: 0.2,
lineWidth: 1,
step: 'center'
}
},
tooltip: {
headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
valueDecimals: 2
},
series: [{
name: 'Bids',
data: Bids, //HERE GOES THE DATA
color: '#03a7a8'
}, {
name: 'Asks',
data: Asks, //HERE GOES THE DATA
color: '#fc5857'
}]
});
</script>
这里是我的图表存在的问题：1）要绘制的数据是asks和bids。问题是这两个变量从websocket连接每秒更新一次，因此它们不是静态值。 2）如何将asks和bids传递到Highcharts图表，并且每次刷新数据时如何刷新图表？预先感谢！
这里是我收到的需要绘制的数据的示例：
var sampleData = [
[7062.24, 0.402181],
[7062.56, 2.472812],
[7062.59, 0.006595],
[7063.01, 1.2001],
[7063.27, 0.4],
[7063.28, 0.100615],
[7063.48, 0.4],
[7063.76, 0.086983],
[7063.83, 0.005],
[7064.19, 0.399752],
[7064.2, 1.70819],
[7064.41, 0.25],
[7064.43, 0.015026],
]
答案
您可以使用map功能如下获取每个series数据
var data = [
[7062.24, 0.402181],
[7062.56, 2.472812],
[7062.59, 0.006595],
[7063.01, 1.2001],
[7063.27, 0.4],
[7063.28, 0.100615],
[7063.48, 0.4],
[7063.76, 0.086983],
[7063.83, 0.005],
[7064.19, 0.399752],
[7064.2, 1.70819],
[7064.41, 0.25],
[7064.43, 0.015026],
];
const asks = data.map(x => x[0]); //DATA TO USE ON THE CHART
const bids = data.map(x => x[1]); //DATA TO USE ON THE CHART
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<div id = "container"> </div>
<script language = "javascript">
var data = [
[7062.24, 0.402181],
[7062.56, 2.472812],
[7062.59, 0.006595],
[7063.01, 1.2001],
[7063.27, 0.4],
[7063.28, 0.100615],
[7063.48, 0.4],
[7063.76, 0.086983],
[7063.83, 0.005],
[7064.19, 0.399752],
[7064.2, 1.70819],
[7064.41, 0.25],
[7064.43, 0.015026],
];
const asks = data.map(x => x[0]); //DATA TO USE ON THE CHART
const bids = data.map(x => x[1]); //DATA TO USE ON THE CHART
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'xy'
},
title: {
text: 'ETH-BTC Market Depth'
},
xAxis: {
minPadding: 0,
maxPadding: 0,
},
yAxis: [{
lineWidth: 1,
gridLineWidth: 1,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'left',
x: 8
}
}, {
opposite: true,
linkedTo: 0,
lineWidth: 1,
gridLineWidth: 0,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'right',
x: -8
}
}],
legend: {
enabled: false
},
plotOptions: {
area: {
fillOpacity: 0.2,
lineWidth: 1,
step: 'center'
}
},
tooltip: {
headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
valueDecimals: 2
},
series: [{
name: 'Bids',
data: bids, //HERE GOES THE DATA
color: '#03a7a8'
}, {
name: 'Asks',
data: asks, //HERE GOES THE DATA
color: '#fc5857'
}]
});
</script>以上是关于Jquery,Highcharts画出的图表怎么能通过点击图表触发事件？的主要内容，如果未能解决你的问题，请参考以下文章