视觉化KBARS(5)-1分k展示

前面把java跟python部分完成後，
接下来要继续写js和html的步骤来完成1分k视觉化。

(1)引用的js套件

    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}" ></script>
	<script src="https://code.highcharts.com/stock/highstock.js"></script>
	<script src="https://code.highcharts.com/stock/modules/data.js"></script>
	<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
	<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

(2)html的部分，
kbar_data为java传过来的资料

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <input type="hidden" id="kbar_data" th:value="${kbar_data}"/>
    <div id="container" style="height: 800px; min-width: 620px"></div>
</body>
</html>

(3)highcharts js撰写，
将时间戳记、开、收、最低、最高价、量的资料取出，
并带入套件中

<script type="text/javascript">
const kbar_data = $("#kbar_data").val();
const myArr = JSON.parse(kbar_data);

const ts = myArr.map.ts.myArrayList;
const Open = myArr.map.Open.myArrayList;
const High = myArr.map.High.myArrayList;
const Low = myArr.map.Low.myArrayList;
const Close = myArr.map.Close.myArrayList;
const Volume = myArr.map.Volume.myArrayList;

    // split the data set into ohlc and volume
    var ohlc = [],
        volume = [],
        dataLength = myArr.map.Volume.myArrayList.length,
        i = 0;

    for (i; i < dataLength; i += 1) {
        ohlc.push([
            parseInt(String(ts[i]).substring(0, 13)), // the date
            Open[i], // open
            High[i], // high
            Low[i], // low
            Close[i] // close
        ]);

        volume.push([
            parseInt(String(ts[i]).substring(0, 13)), // the date
            Volume[i] // the volume
        ]);
    }


    // create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: '2603长荣1分K'
        },

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'OHLC'
            },
            height: '60%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }],

        tooltip: {
            split: true
        },

        series: [{
            type: 'candlestick',
            name: 'AAPL1',
            data: ohlc,
            dataGrouping: {
                enabled: false
            }
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
                enabled: false
            }
        }]
    });

</script>

(4)结果如图