zoukankan      html  css  js  c++  java
  • 用highcharts做动态趋势图 (django,jquery)

    用highcharts做动态趋势图 (django,jquery)

    highcharts官方有个动态图的demo
    (Spline updating each second)
    http://www.highcharts.com/demo/dynamic-update

    觉得效果不错,作为维护工作用的监控很合适

    于是进行丰富(以下代码仅作参考,未考虑异常和安全)
    ==============================
    1、后台返回y值

    使用django框架

    from  mainapp.models import mymodel


    def dynamic_update(request):
     dy_data = mymodel.objects.filter(xxx='111')
     dy_id = dy_data.aggregate(Max('id'))
     dy_max_data = mymodel.objects.filter(id=dy_id['id__max'])
     html = ''
     json_serializer = serializers.get_serializer("json")()
     html += json_serializer.serialize(dy_max_data)
     return HttpResponse(html,mimetype="text/json")

    可以先用浏览器测试下

    2、在动态图demo的脚本中增加一个函数


     function getAjaxvalue()  
     {
              var y = 0;
       $.ajax({
          type:"GET",
          async:false,
      url:"/dynamic_update/",
      datatype:"json",
          success:function(result){
      $.each(result,function(idx,item){
                         y = item.fields['value']    
                           });
      } 
       });
      return y;
     }

     3、修改原来demo中的y赋值语句
       y = Number(getAjaxvalue())


    打开浏览器看看吧

    后面还需要修改间隔时间
    还有 就是 初始化的20条 随机数 我简单设置为0了

  • 相关阅读:
    NetworkInterface网速监测
    动态编译
    JSON C# Class Generator
    Cookie中的HttpOnly
    webapi session
    没有为扩展名“.html”注册的生成提供程序
    转 C# 使用openssl
    openssl jia adress
    扩展JS
    bootstrap 模态
  • 原文地址:https://www.cnblogs.com/4admin2root/p/2673735.html
Copyright © 2011-2022 走看看