Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. The highmaps.js file is also included, but unlike highstock.js, this doesn't include the complete Highcharts feature set. Highstock and Highmaps can be loaded separate files.
step 1: index.html
import js ,Add highstock.js to your index.html file.or Include the JavaScript files in the <head> section of your web page as shown below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ASP.NET Core SignalR Stock Ticker</title>
<link href="StockTicker.css" rel="stylesheet" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script> @*highstock.js 7.03*@
</body>
</html>
you can import the files directly from https://code.highcharts.com.
office highstock:https://www.highcharts.com/blog/products/highstock/
office demo:https://www.highcharts.com/stock/demo
office demo zip:https://code.highcharts.com/zips/Highstock-7.0.3.zip
step 2: create a <div> flag
Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your chart.
<div id="container" style="height: 400px; min-width: 310px"></div>
step 3: data
you can visit web url:
https://www.highcharts.com/samples/data/aapl-ohlcv.json
and save json to ../../code/modules/stock-tools-gui_data.js
var dataList =
[
[
1491399000000,
144.22,
145.46,
143.81,
144.02,
27717900
],
[
1491485400000,
144.29,
144.52,
143.45,
143.66,
21149000
],
[
1491571800000,
143.73,
144.18,
143.27,
143.34,
16672200
],
[
1491831000000,
143.6,
143.88,
142.9,
143.17,
18933400
],
[
1491917400000,
142.94,
143.35,
140.06,
141.63,
30379400
],
[
1492003800000,
141.6,
142.15,
141.01,
141.8,
20350000
],
[
1492090200000,
141.91,
142.38,
141.05,
141.05,
17822900
],
[
1554408001000,
194.79,
196.36,
194.71,
195.69,
18747318
]
];
step 4:render <div id="container">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script> <!--highstock.js 7.03-->
<script src="../../code/modules/stock-tools-gui_data.js"></script> <!--data from https://www.highcharts.com/samples/data/aapl-ohlcv.json-->
<div id="container" class="chart"></div>
<script type="text/javascript">
// load data from ../../code/modules/stock-tools-gui_data.js
var data = dataList;
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
Highcharts.stockChart('container', {
yAxis: [{
labels: {
align: 'left'
},
height: '80%',
resize: {
enabled: true
}
}, {
labels: {
align: 'left'
},
top: '80%',
height: '20%',
offset: 0
}],
tooltip: {
shape: 'square',
headerShape: 'callout',
borderWidth: 0,
shadow: false,
positioner: function (width, height, point) {
var chart = this.chart,
position;
if (point.isHeader) {
position = {
x: Math.max(
// Left side limit
chart.plotLeft,
Math.min(
point.plotX + chart.plotLeft - width / 2,
// Right side limit
chart.chartWidth - width - chart.marginRight
)
),
y: point.plotY
};
} else {
position = {
x: point.series.chart.plotLeft,
y: point.series.yAxis.top - chart.plotTop
};
}
return position;
}
},
series: [{
type: 'ohlc',
id: 'aapl-ohlc',
name: 'AAPL Stock Price',
data: ohlc
}, {
type: 'column',
id: 'aapl-volume',
name: 'AAPL Volume',
data: volume,
yAxis: 1
}],
responsive: {
rules: [{
condition: {
maxWidth: 800
},
chartOptions: {
rangeSelector: {
inputEnabled: false
}
}
}]
}
});
</script>
</body>
</html>
error:
1.Uncaught ReferenceError: $ is not defined
at index.html:13
first import <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
then <script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script> <!--highstock.js 7.03-->
<div id="container" class="chart"></div>
<script type="text/javascript">
$.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', function (data) {
2.Access to XMLHttpRequest at 'https://www.highcharts.com/samples/data/aapl-ohlcv.json' from origin 'http://localhost:9399' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
highstock实现股票分时
http://www.cnblogs.com/friends-wf/p/4480128.html
highstock高级篇之股票分时图
https://www.cnblogs.com/onetwo/p/6085179.html
股票k线
http://www.cnblogs.com/friends-wf/p/4480170.html
highstock K线图 深入研究
http://blog.csdn.net/xiaojiang0829/article/details/28265833
highchart 动态刷新(可用于制作股票时时走势)
MVC下signalr +highcharts,在线实时图表
https://my.oschina.net/u/867090/blog/122421