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 ...
随机推荐
- Windows NT 的历史
Windows NT 的版本历史 https://blog.csdn.net/flyingpig2016/article/details/53282895/ 按照自己找到的资料:windows NT ...
- zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...
- 谈谈git/github
先说git/github操作 ->关于git/github操作的好文章已经非常多,如: github使用指南 廖雪峰的git教程 本文的目的在于,积累自己平时相关的操作和想法,记录下来,形成自己 ...
- oninput和onchange的区别
菜鸟教程: oninput事件:HTML5标准事件 当用户向<input>中尝试输入时执行JavaScript: <input type="text" oninp ...
- Ionic1.x项目中的Installing npm packages问题
与npm远程源有关,可以通过cnpm来解决: 一.ionic start myApp blank --skip-npm(跳过Installing npm packages会产生的问题): 二.然后进入 ...
- DTW动态时间规整
参考: https://blog.csdn.net/raym0ndkwan/article/details/45614813
- Airflow 使用随笔(内含 TimeZone 和 Backfill 等的详解)
其实怎么部署 airflow 又哪些特性,然后功能又是如何全面都可以在 Reference 的文章里面找到,都不是重点这里就不赘述了. 这里重点谈一下我在部署完成仔细阅读文档之后觉得可以总结的一些东 ...
- DELPHI中MDI子窗口的关闭 和打开
Delphi中MDI子窗口的关闭方式默认为缩小而不是关闭,所以当你单击子窗口右上角的关闭按钮时会发觉该子窗口只是最小化,而不是你预期的那样被关闭.解决办法是在子窗口的OnClose事件处理过程中加入如 ...
- 行为驱动开发(BDD) - 深入了解
行为驱动开发(BDD) - 一个快速的描述和示例 BDD表示乙 ehavior ð里文ð才有发展.用于描述行为的语法是Gherkin. 这个想法是尽可能自然地描述一种语言应该发生什么. 如果你熟悉单元 ...
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件