静态博客中实现数据可视化plotly + docsify

静态网站加入动态可视化数据

环境：Python +Docsify静态网站框架（别的也行）+ Ubuntu云服务器 + nginx + Plotly + IFRAME

我的需求：服务器后台自动爬取投资数据，自动绘制图表，并且更新到静态网站的页面中。
首先可以肯定的是，Docsify中想要直接加入这些功能是不可能的，必须生存HTML文件，曲线救国。

大致方法有两种。

• 通用配置
  • 无论你采用什么框架，这个方案肯定行得通。
  • 并且你甚至不需要有自己的服务器，HTML文件可以挂在GitHub page，但是访问速度会很慢。
  • 可以在你的服务器上动态更改数据重新生成html文件和数据页面
  • 数据可视化界面与博客文档完全独立。
• 美观配置：目前确定docsify可以，其他的基于markdown的博客框架大概率也可以。
  • 优势：数据可视化直接插入markdown文本额任意指定位置，美观。
  • 缺点：想要更改数据必须修改博客文档内的文件，比较麻烦。

通用配置

• 在服务器端把数据处理好，用python + Plotly 把数据处理好，制作成HTML文件。
• nginx新建一个服务端口，单独挂载这个HTML页面。
• 在静态网站中插入HTML的链接

实例

绘制净值图

import plotly as py
import plotly.graph_objs as go
import numpy as np
 
pyplt = py.offline.plot
 
# 随机生成100个交易日的收益率
s1 = np.random.RandomState(8) # 定义局部种子
s2 = np.random.RandomState(9) # 定义局部种子
rd1 = s1.rand(100)/10 - 0.02
rd2 = s2.rand(100)/10 - 0.02
 
# 设定初始资金
initial1 = 100000
initial2 = 100000
total1 = []
total2 = []
for i in range(len(rd1)):
    initial1 = initial1*rd1[i] + initial1
    initial2 = initial2*rd2[i] + initial2
    total1.append(initial1)
    total2.append(initial2)
 
trace1 = go.Scatter(
#     x = [1, 2, 3, 4],
    y = total1,
    fill = 'tonexty',
    mode= 'none', # 无边界线
    name = "策略1"
)
trace2 = go.Scatter(
#     x = [1, 2, 3, 4],
    y = total2,
    fill = 'tozeroy',
    mode= 'none',# 无边界线
    name = "策略2"
)
 
data = [trace1, trace2]
 
layout = dict(title = '策略净值曲线',
              xaxis = dict(title = '交易天数'),
              yaxis = dict(title = '净值'),
              )
fig = dict(data = data, layout = layout)
pyplt(fig, filename='1.html')

Nginx配置

将上述代码生成的html文件放入服务器任意位置。进入/etc/nginx/路径，新建文件夹sudo mkdir vhost,在文件夹中新建配置文件pic.conf，将下述内容加入，并作相应修改：

server {
    listen       3000;            # 站点监听端口,为避免与80端口冲突
	server_name www.web.com ;     # 站点域名
    root  /www/webB;              # HTML存放目录
    index 1.html;                  # HTML文件名
}

保存退出，接着返回上级文件夹，在/etc/nginx/nginx.conf文件的http语句块内加入
include /etc/nginx/vhost/*.conf

sudo nginx -t测试配置是否正确，如果报错检查是否有写错的地方
最后执行nginx的重启sudo nginx -s reload

此方法的优势在于，无论采用什么博客框架，都可以实现在你的网站上展示动态的数据可视化。

美观配置

用iframe直接在markdown中插入嵌套网页！
用上一步的python代码生成的HTML文件即可，将1.html放在你网站的目录内任意位置，在你想要插入的地方插入以下代码：

 <iframe  
 height=300 
 width=100% 
 src="/invest/1.html"  
 frameborder=0  
 allowfullscreen>
 </iframe>

这里不使用数据图表做演示 😃 毕竟说不定啥时候这个链接就更换了，干错直接用主页的界面来演示：

FUNNY！这里的嵌套网页是可以多重套娃的！！

很可惜，CSDN无法展示嵌套网页，请前往预览

如何让数据动态实时更新？

如果采用通用配置，你可以直接把数据源获取的代码部署在服务器，在写个脚本按照最新的数据生成新的HTML页面，在nginx指定的目录中把旧的数据html替换掉就可以了。这种方法也是最实时的。

但是这样的缺点也很多，如果你需要展示10个动态数据，那就需要开启10个nginx的服务。
另外单独的HTML内只有数据可视化图表，想要新增内容必须编写HTML代码。

我采用的是完美配置的方式。因为目前为止我不需要高频获取数据，我只需要在PC端每天更新一下数据，把新的html直接替换到blog对应位置就可以了。