<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highstock Example</title>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
}
</style>
</head>
<body>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
// create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
series: [{
type: 'ohlc',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
</script>
</body>
</html>嗨，这是我在stack上的第一篇文章，所以如果错了请更正。我想知道如何访问上面例子中的高股价图的属性。例如，如果我想通过代码从外部设置"rangeselector"的"selected"属性，该如何操作。如有任何帮助，我们将不胜感激。
感谢
您可以：
- 将图表存储在变量中：
const chart = Highcharts.stockChart('container', {...});
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
- 使用
load事件：
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
}
}
},
...
});
- 使用回调函数：
Highcharts.stockChart('container', {
...
}, function(chart) {
chart.rangeSelector.buttons[0].element.dispatchEvent(new Event('click'));
现场演示：http://jsfiddle.net/BlackLabel/3L7uvm4n/
API参考：
https://api.highcharts.com/class-reference/Highcharts#.chart
https://api.highcharts.com/highcharts/chart.events.load