视觉化当日趋势图(6)-折线图/趋势图
今天进入到重头戏了，
昨天介绍完我们使用的工具我们今天就要使用它，
(1)html部分
这个部分主要是接收java传来的资料，
然後用const text = $("#tick_data").val();
const myArr = JSON.parse(text);
去将json string转化为json array，
然後将值带入data: myArr.myArrayList
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}" ></script>
<script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/modules/series-label.js"></script>
<script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<input type="hidden" id="tick_data" th:value="${tick_data}"/>
<div id="container" style="max-width:1200px;height:600px"></div>
<script type="text/javascript">
const text = $("#tick_data").val();
const myArr = JSON.parse(text);
var chart = Highcharts.chart('container', {
title: {
text: '2021-09-28纬颖6669趋势图'
},
yAxis: {
title: {
text: '价格'
}
},
xAxis: {
labels: {
enabled: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2021
}
},
series: [{
name: 'ticks',
data: myArr.myArrayList
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
</html>
(2)java controller的部分(前几章有)
String tickdate = pRequest.getParameter("tickdate") == null ? "" : pRequest.getParameter("tickdate");
String tick_data = shioajiService.test(tickdate);
JSONArray jsonArray = new JSONArray(tick_data);
Gson gson = new Gson();
model.addAttribute("tick_data", gson.toJson(jsonArray));
return "show";
(3)python api的部分(前几章有)
@app.route('/testdata', methods=['GET'])
def test_tick():
api = sj.Shioaji(simulation=True)
api.login(
person_id="PAPIUSER01",
passwd="2222",
contracts_cb=lambda security_type: print(f"{repr(security_type)} fetch done.")
)
date_temp = request.args.get('tickdate')
print("date_temp: "+date_temp)
tick = api.ticks(
contract=api.Contracts.Stocks["6669"],
date=date_temp
)
print("tick: "+json5.dumps(tick['close']))
return json5.dumps(tick['close'])
(4)执行结果如图:
其实还有很多细节没修，像python api的部分，
要看什麽股票也是可以用url传参数控制、
标题也是可以自动带入不用写死，
只是先做的范例之後还可以用得更完善，
也恭喜大家看到这里至少已经将第一个API成功视觉化了~
>>: EP22 - [Ruby on Rails] 安装 Sinopac-FunBiz 套件进行刷卡
Day03【JS】立即呼叫函式 IIFE
IIFE 全称为 Immediately Invoked Function Expression 中...
30天学会C语言: Day 21-数值转换
数学运算的结果只有在运算元有浮点数的时候才会是浮点数，如果运算元全都是整数，不管做甚麽运算都只会得到...
Day14_附录A.控制项(A8_资产管理)
如果只有贴图上来，应该还是会很想打死我，就打死我吧，卡壳严重冏rz。 ▉附录A的A8资产管理，以资产...
JS 08 - 静态方法
大家好！ 我们进入今天的主题吧！ 物件方法 如果要推入项目至阵列，我们会使用原型方法。 但是，为什麽...
D7(9/7)-91App(6741) 帮商家做电商的电商专家
注:发文日和截图的日期不一定是同一天，所以价格计算上和当日不同，是很正常的。 声明:这一系列文章并无...