highstock+websocket实现动态展现
效果:从后台获取回测数据,在前端动态展现,和聚宽实现的回测效果相仿
大体思路:先传一个[[int,0],[int,0],[int,0],[int,0],[int,0],...]格式的死数据到前端渲染x轴,这样在我们动态加载数据的时候就不会出现x轴动态的变化的尴尬场面了,但是还有一个问题就是0轴上的数据也会显示到数据框,这个时候我们就需要设置一个属性 enableMouseTracking: false 这个属性我找了好长时间,所以一定要记住!
index.html代码
var chart = Highcharts.stockChart('container', {
rangeSelector: {
allButtonsEnabled: true
},
chart: {
animation: false,
showAxes: true
},
credits: { //版权信息配置
enabled: false
},
tooltip: { // 数据提示框配置
split: false,//把x轴和y轴放在一个图标里
xDateFormat: '%Y年%m月%d日,%A',//鼠标移动到趋势线上时显示的日期格式
shared: true,
pointFormatter: function () {
return '<span style="color: '+ this.series.color + '">\u25CF</span> '+ this.series.name+': <b>'+ (this.y*100).toFixed(3) + '%</b><br/>'
}
},
xAxis: {
crosshair: { // 十字准星线配置
width: 1,
color: "black"
},
type: 'datetime', // 时间轴
tickmarkPlacement:"on", // 点和x轴对齐
labels: {
formatter: function () {
return Highcharts.dateFormat("%Y-%m-%d", this.value);
}
},
minTickInterval: 24
},
yAxis: {
labels: {
formatter: function () {
return this.value*100+"%"; // y轴数据百分比
}
}
},
series: [{
name:'',
data:[],
color:"black",
enableMouseTracking: false //鼠标移动的时候0轴信息不显示
},{
name: '策略收益',
data:[],
color:"#058DC7"
}]
});
var ws;
var return_dic;
var i=0;
function run_py() {
ws = new WebSocket("ws://127.0.0.1:8888/run_py/");
var msg = {
py_name: $("#py_name").val(),
py_count: $("#py_count").val()
};
ws.onopen = function() {
ws.send(JSON.stringify(msg));
};
// 思路:第0个数据列渲染一个0轴,其余数据列通过addpoint动态渲染
ws.onmessage = function (evt) {
return_dic = JSON.parse(evt.data);
if ("date_false" in return_dic){
chart.series[0].setData(return_dic.date_false); // 先把0轴渲染出来
}else {
console.log(chart.series[0].data[i].x);
chart.series[1].addPoint([chart.series[0].data[i].x,return_dic.returns]); // 动态添加真实数据
i+=1;
}
};
}
注意注意:一定是 (this.y*100).toFixed(3)而不是this.y.toFixed(5)*100,不然页面会有bug,踩过坑的人都懂
后端代码
class EchoWebSocket(tornado.websocket.WebSocketHandler):
def open(self):
print("WebSocket opened") def on_message(self, message): #主逻辑在这里写的,注意不要忘了发完数据关闭close掉连接,如果要求一直连着那就没必要关了
self.write_message(u"You said: " + message) def on_close(self):
print("WebSocket closed")
highstock+websocket实现动态展现的更多相关文章
- highstaock+websocket实现动态展现
效果:从后台获取回测数据,在前端动态展现,和聚宽实现的回测效果相仿 大体思路:先传一个[[int,0],[int,0],[int,0],[int,0],[int,0],...]格式的死数据到前端渲染x ...
- Python动态展现之一
首先: def f(): print('first') def g(): f() g() def f(): print('second') g() 结果: >>> first sec ...
- web端百度地图API实现实时轨迹动态展现
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...
- iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现
最近同样是新App,设计稿里出现一种圆形进度条的设计,如下: 想了想,圆形进度条实现起来不难,但是其中显示百分比的文本确需要自适应,虽然可以使用时自己设定文本字体的大小,但是这样显得很麻烦,也很low ...
- 数据可视化之powerBI技巧(十八)Power BI动态技巧:动态显示列和度量值
今天分享一个可视化小技巧,如何在PowerBI的表格中动态显示需要的列? 就是这样的效果, 也就是根据切片器的筛选,来显示需要的列,做起来很简单,步骤如下: 01 逆透视表 进入Powerquery编 ...
- FK JavaScript之:ArcGIS JavaScript API之地图动画
地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScr ...
- 【读书笔记《Android游戏编程之从零开始》】11.游戏开发基础(SurfaceView 游戏框架、View 和 SurfaceView 的区别)
1. SurfaceView 游戏框架实例 实例效果:就是屏幕上的文本跟着点击的地方移动,效果图如下: 步骤: 新建项目“GameSurfaceView”,首先自定义一个类"MySurfac ...
- ZK框架的分析与应用
前言:本文是在下的在学习ZK官方文档时整理出来的初稿.本来里面有很多的效果图片和图片代码的.奈何博客园中图片不能粘贴上去,所以感兴趣的筒子们就将就吧.内容中,如有不好的地方,欢迎斧正! ZK框架的分析 ...
- Android自定义窗口动画
第一步,设置出现和消失的xml 1.在res/anim下创建enter_anim.xml,设置窗口出现的动画 <?xml version="1.0" encoding=&qu ...
随机推荐
- C#如何调用C++的dll
背景 一个项目,算法部分使用C++的openCV库编写图像处理程序,编译成dll,用户界面采用C#编写,去调用该dll暴露的接口. C#编写的是托管代码,编译生成微软中间语言,而普通C++代码则编译 ...
- leetcode资料整理
注:借鉴了 http://m.blog.csdn.net/blog/lsg32/18712353 在Github上提供leetcode有: 1.https://github.com/soulmachi ...
- Dom4j解析
dom4j-1.6.1.jar, 这个包提供了xml解析相关的方法. 这里做一个记录,微信公众号里需要对HttpServletRequest做解析,实际上也可以用dom4j提供的方法进行解析转换. 这 ...
- Hbase API
- PhpStorm本地断点调试
一.断点调试php环境搭建 1.检测本地php环境是否安装了Xdebug 在本地输出phpinfo():搜索Xdebug;如下图 如果没有安装,安装操作Xdebug如下: 将phpinfo();的信 ...
- java学习之—栈
/** * 栈 * Create by Administrator * 2018/6/11 0011 * 上午 10:20 **/ public class StackX { private int ...
- Javaweb小结之——JavaBean+持久层
数据持久层学习了JDBC.连接池以及DBUtil 思考一下,在学会使用SSM框架之前,还是先多使用DBUtil吧 数据库持久层的JDBC.连接池和DBUtil,这个链接给我了一些参考https://b ...
- Vue簡介
vue使用由下向上的增量開發模型: vue是javascript的漸進框架: vue的目標是盡量使用簡單的API實現響應的數據綁定和組合的視圖組件.
- JavaScript之简易http接口测试工具网页版
简易http接口测试工具网页版,支持get.post请求,支持json格式消息体,form表单暂不支持. httpClient.html <!DOCTYPE html> <html ...
- java中的几个概念
1.JDK(Java Development Kit ):编写Java程序的程序员使用的软件(它是编写java程序,使用到的工具包,为程序员提供一些已经封装好的 java 类库) 2.JRE(Java ...