V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hunk
V2EX  ›  程序员

想做一个监控类的图表动态更新页面,有啥轮子可以复用?

  •  
  •   hunk · 2017-02-21 22:05:16 +08:00 · 6065 次点击
    这是一个创建于 2816 天前的主题,其中的信息可能已经有所发展或是发生改变。
    想做一个图表页面,数据动态更新,初步考虑数据定时生成 json 文件,方便缓存,前后端可以分离。
    vue 很流行,图表想用 highchart 试试,数据方便没想好,除了 mysql 保存时间序列类数据还适合用啥?
    项目是朋友一起做的,一半使用,一半想练手,只是想做的漂亮些。
    18 条回复    2022-01-14 09:51:54 +08:00
    star29
        1
    star29  
       2017-02-21 22:44:20 +08:00
    目前用 Echarts ,要相信国产的会更好的
    Allianzcortex
        2
    Allianzcortex  
       2017-02-21 22:48:31 +08:00
    一直用 HighCharts 的路过。。 http://allianzcortex.me/2016/09/08/Data-Visualize-With-Flask-And-Highcharts/ 动态更新的话应该是 Ajax 监控后端数据变化吧?
    BlueWolf
        3
    BlueWolf  
       2017-02-21 22:49:42 +08:00
    时间序列数据,可用 influxdb
    gwind
        4
    gwind  
       2017-02-21 22:50:53 +08:00
    参考下 grafana , 先前一直想用 D3.js , 后来发现 D3 直接写还是要求很高的。有很多基于 D3 的好项目, LZ 可以找找看。
    jimzhong
        5
    jimzhong  
       2017-02-21 22:51:06 +08:00
    用过 highcharts+websocket 实现动态更新。用 addpoint 就好了
    gwind
        6
    gwind  
       2017-02-21 22:51:43 +08:00   ❤️ 1
    @BlueWolf influxdb 非常优秀,一直在用,另外也可以考虑 Elasticsearch
    BlueWolf
        7
    BlueWolf  
       2017-02-21 22:56:43 +08:00   ❤️ 1
    @gwind ElasticSearch 做时间序列数据存储时,需要配置下 mapping ,关闭 all 和 source ,操作稍微复杂些,不能“开箱即用”;不过好处是可以分布式、多副本
    gwind
        8
    gwind  
       2017-02-21 23:20:26 +08:00
    @BlueWolf 是的, influxdb 做到了开箱即用。
    influxdb 的“定义”了时序数据库。 Elasticsearch “定义”了搜索。
    实际应用要看项目需求去搭配,各有擅长的领域,但也有交集,所以 grafana 才同时支持这两种类型的 datasource (他们各自还有个应用堆栈: TICK 和 ELK )
    tedzhou1221
        9
    tedzhou1221  
       2017-02-22 00:44:23 +08:00 via iPhone
    百度 echarts
    superdong
        10
    superdong  
       2017-02-22 10:03:13 +08:00
    我记得不久前,可能是十几个小时前有个 V 友就造了 Vue2.0 +某 charts 的轮子。
    可惜我竟然找不到了,找不到了…… Google 大法都不管用,估计还没被收录。
    (借楼一用,搭车问一下,那个帖子的地址,我仿佛是失忆了,后悔当时没及时点开帖子看内容)
    hunk
        11
    hunk  
    OP
       2017-02-22 14:13:04 +08:00
    @star29 国产的是好,使用略复杂,也是看了 v2 朋友的反馈,用 highchart 比较全面。偷懒。
    @Allianzcortex js 刷新获取数据,还是很方便的,后端生成 js 数据。
    @BlueWolf 谢谢,也在纠结要不要尝试 influxdb ,毕竟还有些数据库需要保存, mysql 恐怕也少不了。涉及 2 种以上的数据库,要不要试试呢。。。
    @gwind 谢谢, grafana 先收藏着,以后慢慢看。
    @jimzhong websocket 是个新思路,一直想的简单,直接刷新呢,数据少,效率上还顶的住。
    @gwind Elasticsearch 比较重,目前感觉没必要上。数据是一方面,图表还是想漂亮点,能自己控制比较好。
    hunk
        12
    hunk  
    OP
       2017-02-22 14:35:13 +08:00
    我想存储的是心跳,体温等健康数据, influxdb 是否能永久保存,是否需要再存一份在 mysql 中?
    yonoho
        13
    yonoho  
       2017-02-22 15:27:45 +08:00
    influxdb 据说很好用,单机很快。我们用的 opentsdb 集群,感觉专用的时间序列数据库在使用上还是更加方便的,尤其应对复杂查询的时候,可以少造很多轮子。

    凡是叫做 db 的东西,持久化都是没问题的,不用考虑 mysql 了我感觉。
    lIlIlIlIlIlIlIlI
        14
    lIlIlIlIlIlIlIlI  
       2017-02-22 17:23:16 +08:00
    感觉动态数据方面, highcharts 比 echarts 的数据结构更清晰
    LeeSeoung
        15
    LeeSeoung  
       2017-02-23 09:51:24 +08:00
    Justineo
        16
    Justineo  
       2017-02-23 12:20:27 +08:00
    用 Vue + ECharts 的话,可以试试我这个: https://justineo.github.io/vue-echarts/demo/
    superdong
        17
    superdong  
       2017-02-24 09:26:18 +08:00
    @LeeSeoung 应该不是这个,我记得是用 Vue2.0 做的
    可能是这个 https://github.com/hchstera/vue-charts
    @Justineo 你的也不错
    simeon
        18
    simeon  
       2022-01-14 09:51:54 +08:00
    @hunk 楼主还在做这类的开发嘛?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1305 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:46 · PVG 01:46 · LAX 09:46 · JFK 12:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.