受欢迎的博客标签

chart-highstock(1):how to use highstock.js with local data

Published

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