搭建免费的量化交易可视化系统
在量化交易系统中，如何查看账户的状况呢，这篇文章将会以查看余额为例分享一个思路。
这篇文章的数据存储在 MongoDB 的官方免费云服务中，具体细节可以查看我的另一篇文章《搭建免费的量化交易余额数据库》。
看板效果
以上是 Grafana 看板效果的截图，左边的图是所有账户加起来的余额曲线，右边的图是分账户的余额曲线。
Grafana 的前端显示可以适配手机浏览器，在手机上登录之后，可以随时随地查看系统状况。
Grafana 官方免费云服务
Grafana 是一个可视化平台，能很方便的构建和查看各类图表，常被用来搭建服务器监控系统。时间序列图标是 Grafana 中常用一种图形，横坐标是时间，纵坐标是相关数据。Grafana 中的时间序列图形，很适合用来展现账户的历史余额曲线。
Grafana 有官方提供的云服务，并且有免费的基础版。
官方云服务对我们个人用户来说非常方便，它免去了购买服务器搭建维护服务的工作，并且开通使用时不需要绑定信用卡，无需担心扣费问题。
Grafana 的云服务免费版，限制了在云服务中记录日志的条数，对我们来说没有影响，因为我们的数据记录在 MongoDB 的云服务中。
使用方法
这套系统，使用 MongoDB 作为数据库存储余额数据，使用 Grafana 作为可视化系统从 MongoDB 表中读取余额数据，并绘制成图表，用户用浏览器登录到 Grafana 中即可查看。
搭建步骤 1：开通 Grafana 云服务
打开 grafana.com ，点击右上角 Sign in，注册完成后登录。
进入 Grafana Cloud Portal，新建一个 Stack（技术栈），Stack 包含了一套技术工具，目前有 Grafana、Prometheus、Loki、Graphite、Alerts、Tempo、K6、Pyroscope。
在新建页面内，填写一个 grafana.net 的二级域名，地域选择了和 MongoDB 相同的 AWS 新加坡，点击新建。
我选择了 quanting.grafana.net 这个域名，以后就可以访问这个域名查看我的图表。
新建后，点击 Grafana 的 Launch 进入之后，在右上角个人资料内，可以设置为中文语言。
搭建步骤 2：安装 MongoDB 插件
默认情况下，Grafana 没有连接 MongoDB 的能力，需要安装 MongoDB 连接插件。
在 Grafana 的界面内，点击左侧导航，在展开的菜单中找到 Connections - Add new connection，在搜索框中输入 mongodb，找到 Data source 下面的 MongoDB，点击进入。
进入 MongoDB 连接之后，发现默认情况下 MongoDB 插件未安装，点击右上角 Install via grafana.com。
进入打开的插件页面后，在我们的域名旁边，点击 Install plugin 安装插件，点击后立刻安装完毕。
再回到 Grafana，刷新刚才的 MongoDB 插件页面，发现已经安装完成出现了 Add new data source，如果没有出现，可能要等待一会多刷新几次。
⚠️ 注意：在自己搭建的 Grafana 中，MongoDB 插件需要企业版，社区免费版无法使用。如果未来需要自己搭建 Grafana，需要考虑现阶段是否使用 MongoDB。
搭建步骤 3：连接 MongoDB 数据库
点击 Add new data source，后新建 MongoDB 连接，填入 Connection string 和下面的 User 及 Password，其他不需要设置，最后保存。
如果使用了 MongoDB 官方的 Atlas 服务，获取连接字符串的按钮，在下图所示 Connect 的位置，点击后选择 Drivers，可以获得连接字符串。
复制出连接字符串，删除掉账户和密码部分 wuzao:<password>@，得到 mongodb+srv://cluster0.6pybgvc.mongodb.net/?retryWrites=true&w=majority 填入到新建页面。
搭建步骤 4：新建图表
在 Grafana 左侧导航栏，点击「仪表板」，再点击右上角「新建」，选择「新建仪表板」，再点击「添加可视化」。
如果弹出了 Select data source，则选择刚才新建的 MongoDB 数据库。数据结构请见我的另一篇文章《搭建免费的量化交易余额数据库》。
来到新建仪表板页面，右上角选择 Time series 时间序列类型，代码填写：
account.getCollection("balances").aggregate([
{$match: {$and: [{"time": {$gte: $__timeFrom}}, {"time": {$lt: $__timeTo}}]}},
{$addFields: {total: {$sum: "$balances.balance"}}},
{$project: {_id:0, time: 1, total: 1}}
])
代码中第一行指定了表名，第二行是为了过滤时间范围，第三行是加总所有账户的余额，第四行意思是只保留时间和总余额字段。
点击右上角 Save 进行保存，如果点击 Apply 则不会保存，只应用和预览。
再用相同步骤添加另一个分账户余额的页面，代码填写：
account.getCollection("balances").aggregate([
{$match: {$and: [{"time": {$gte: $__timeFrom}}, {"time": {$lt: $__timeTo}}]}},
{$unwind: "$balances"},
{$project: {_id:0}}
])
代码中第一行指定了表名，第二行是为了过滤时间范围，第三行是展开 balances 数组字段方便生成多条曲线，第四行意思是不显示 _id 字段。
点击 Save 保存。
最后效果，如下图所示：
总结
Grafana 官方云服务免费版，为我们提供了免维护的在线看板系统，结合 MongoDB Atlas 的免费官方数据库云服务，为我们提供了一个免费观察量化系统的可视化系统。