视觉化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)结果如图
https://ithelp.ithome.com.tw/upload/images/20211012/20107848YMILMLn2RO.jpg

上方是k棒、而下方是量的柱状图,
这样就完成第二个视觉化的功能。


<<:  [Day 27] Final Project (3/5) — 让 App 在本机端运行

>>:  【Day27】线性收敛除法器实作

PHP 语言和你 SAY HELLO!!

第十四天 各位点进来的朋友,你们好阿 小的不才只能做这个系列的文章,但还是希望分享给点进来的朋友,知...

资安学习路上-学习资源整理

学习资源整理-资安社团 决定好要学习哪个面向,那要去哪里学呢??是不是要花大钱去补习才能学得会呢? ...

Rust-并行&并发(一)

有关於并行和并发的定义每个人可能有不一样的解释 并行指的是在同一时刻,多条指令在 CPU 上同时执行...

刷题後的归纳与淬链 - 常见的解题技巧「模板」

为什麽要刷题? 在经历过了二十天左右的刷题练习经验,我们从不同的题目中尝试了各种有趣的程序题目。 ...

Day 3-何时用单元测试?在这之前,要先厘清除了单元测试以外的测试 (基础-2)

单元测试的好朋友—整合测试 (Integration Test) 在昨天 Day 2-什麽是单元测试...