精华内容
下载资源
问答
  • 用highcharts做动态趋势图 (django,jquery) highcharts官方有个动态图的demo(Spline updating each second)http://www.highcharts.com/demo/dynamic-update 觉得效果不错,作为维护工作用的监控很合适 于是...

    用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了

    转载于:https://www.cnblogs.com/4admin2root/archive/2012/09/06/2673735.html

    展开全文
  • 这个是一个使用JavaScript实现的人口增长趋势动态图
  • jQuery简单实现人口趋势动态图 代码如下: <!DOCTYPE html> <html&...人口趋势图</title> <style type="text/css"> * {  margin

    jQuery简单实现人口趋势动态图

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>人口趋势图</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    #container{
      
    }
    #container div {
        position:absolute;
        width: 100px;
        height: 20px;
        background-color: orange;
        line-height: 20px;
        text-align: center;
        transition:all 0.5s linear;
        white-space:no-warp;
        overflow:hidden;
        text-overflow:ellipisis;
        font-size:12px;
    }
    #container div:nth-child(1) {
      background:skyblue;
    }
    #container div:nth-child(2) {
      background:orange;
    }
    #container div:nth-child(3) {
      background:pink;
    }
    #container div:nth-child(4) {
      background:green;
    }
    #container div:nth-child(5) {
      background:cyan;
    }
    button{
      display:block;
      position:absolute;

    }
    i{
     font-style:normal;
     float:right;
    }
    #msgBox{
      width:100px;
      background:skyblue;
      position:absolute;
      top:0;
      left:0;
      display:none;
      transition:opacity 0.5s linear;
    }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="population.js"></script>
    <script type="text/javascript">
        $(function() {
             var total=220;    
             init(population);  
          
         function init(populationData){
              var htmlStr="";
              var htmlStrPrefix="<div id='container'>";
              var htmlStrSuffix="</div><button id='dataBtn'>数据可视化</button><div id='msgBox'></div>";
             
              $.each(populationData,function(index,val){
                    htmlStr+="<div id='"+val.id+"'>"+val.name+"<span></span><i></i></div>";
              });
              $("body").html(htmlStrPrefix+htmlStr+htmlStrSuffix);
              
             $("#container").find("div").each(function(index,value){
                 $(this).css({
                     top:index==0?"6px":(index*26+6)+"px",
                     left:"12px"
                 })
              });
              
              $("#container").find("div").each(function(index,value){
                      var matchData=getData($(this).attr("id"))[0];
                      var yearData=getData($(this).attr("id"))[1];                  
                      $(this).css({
                                width : Math.floor(matchData[0]/total)*12+"px"
                             }).find("span").text(":"+yearData[0]);
                      $(this).find("i").text(matchData[0]);                         
              });
              $("#dataBtn").css({
                 top:(26*population.length+6)+"px"
              });
         }
         
         function getData(id){
            var searchData=[];
            $.each(population,function(index,val){
                  if(val.id==id){
                    searchData.push(val.data);
                    searchData.push(val.year);
                    searchData.push(val.name);
                  }
              });
              return searchData;
         }
        $("#dataBtn").click(function(){
               $("#dataBtn").attr("disabled","disabled");
                 var counter=0;
                 var matchData=[];
                 var yearData=[];
                 var timer=setInterval(function(){
                     $("#container").find("div").each(function(index,value){
                         matchData=getData($(this).attr("id"))[0];
                         yearData=getData($(this).attr("id"))[1];
                         var sortIndex=getSortIndex(counter,matchData[counter]);
                            $(this).css({
                                     width : Math.floor(matchData[counter]/total)*12+"px",
                                     top: sortIndex==0?"6px":(sortIndex*26+6)+"px"
                                 }).find("span").text(":"+yearData[counter]);
                            $(this).find("i").text(matchData[counter]);                                     
                        });
                         counter++;
                         if(counter>=matchData.length){
                             clearInterval(timer);
                             counter=0;
                             $("#dataBtn").removeAttr("disabled");
                         }
                      },500);               
           });
           function getSortIndex(searchIndex,val){
            var temp=[];
            var sortIndex=-1;
            
            $.each(population,function(index,val){
               temp.push(val.data[searchIndex]);
            });
            temp=sort(temp);
            temp.forEach(function(value,index){
                  if(value==val) sortIndex=index;
           })
            return sortIndex;
        }        
        
        function sort(arr) {
                arr.sort(function(a, b) {
                    return a < b ? 1 : -1
                });
                return arr;
           }         
        });
    </script>
    </head>
    <body>
    </body>
    </html>

    ==========================population.js ========================

    population=[
       {
          id:'hnp',
          name:"河南",
          data:[2568,3820,4236,3820,4236,4888,5500,6910,7550,8120,9678,10654,11200,11580,11690,12180],
          year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
       },
       {
          id:'gdp',
          name:"广东",
          data:[2258,3059,3456,5530,6950,7200,8578,9755,10560,11689,12650,14880,16580,18000,21560,23000],
          year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]

       },
       {
          id:'sdp',
          name:"山东",
          data:[1200,1516,2236,3678,4200,5889,6200,7755,8200,9689,12000,13100,14250,15000,16000,17500],
          year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
       },
       {
          id:'jsp',
          name:"江苏",
          data:[1305,1416,1936,3178,4100,6089,7200,8955,9200,10689,11000,13800,15000,16820,18300,21400],
          year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
       },
       {
          id:'scp',
          name:"四川",
          data:[1206,1316,1436,1678,2200,3889,4200,4755,5200,5689,7300,7800,9200,11200,12300,13400],
          year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
       },
       {
          id:'hbp',
          name:"湖北",
          data:[1206,1286,1386,1578,1900,3089,3800,4355,4900,5389,6700,7200,8600,9500,11300,12700],
          year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005]
       }
    ];

    ====================效果截图====================

    展开全文
  • 写了一个趋势图组件但是在页面上写该标签渲染不出来了 大佬帮我看看是怎么回事吗 这是在home页面上的标签 [img=https://img-bbs.csdn.net/upload/202005/20/1589962698_785066.png][/img] 这是趋势图文件...
  • 1.生成可执行文件收集动态内存数据 \hardware\qcom\memory\memory_detect.c #include <stdio.h> #include <linux/kernel.h> #include <linux/unistd.h> #include <unistd.h> #include &...

    1.生成可执行文件收集动态内存数据

    \hardware\qcom\memory\memory_detect.c

    #include <stdio.h>
    #include <linux/kernel.h>
    #include <linux/unistd.h>
    #include <unistd.h> 
    #include <sys/sysinfo.h>
    #include <string.h>   
    #include <stdlib.h>  
    
    
    int main(int argc,char *argv[])
    {
    	FILE * mfd;
    	FILE * rfd;	  
        char buff[1024];
        long total;
        long avalable;
        long free;
        float memory_ratio;
        char name[20];
        char sf[7];
        int interval = 0;
    		
    		if(argc > 1)
    		{
    			//char* 到 int
    			interval = (int)atoi(argv[1]);
    			printf("arg_num : %d,interval : %d\n",argc,interval);
    		}else{
    			//default 60s
    			interval = 60;
    		}
    		
    		system("rm -rf /data/memory.txt"); 
    		rfd = fopen("/data/memory.txt","ab+");
    		sprintf(sf,"%d",interval);
    		fwrite(sf,1,1,rfd);
    		fclose(rfd);
    		
    		while(1)
    		{
    			avalable = 0;
    			free = 0;
    			mfd = fopen("/proc/meminfo","r");
    			rfd = fopen("/data/memory.txt","ab+");
    			fgets(buff, sizeof(buff), mfd); 
    		  	sscanf(buff, "%s %ld", name,&total);  
    		    fgets(buff, sizeof(buff), mfd); 
    		    sscanf(buff, "%s %ld", name,&free); 
    		    fgets(buff, sizeof(buff), mfd); 
    		    sscanf(buff, "%s %ld", name,&avalable); 
    		    printf("total : %ld,avalable : %ld\n",total,avalable);
    		    memory_ratio = (float)avalable/(float)total;
    		    sprintf(sf,"\n%.3f",memory_ratio); // float 到 char
    		    printf("memory ratio:%s\n",sf);
    		    fwrite(sf,1,sizeof(sf)-1,rfd);
    		    fclose(mfd);
    		    fclose(rfd);
    		    sleep(interval);
    		}
        
    }
    

    Android.mk

    LOCAL_PATH := $(call my-dir)
    
    # common include paths
    
    
    # 
    include $(CLEAR_VARS)
    LOCAL_C_INCLUDES := $(commonIncludes)
    
    LOCAL_MODULE := memory_detect
    LOCAL_MODULE_OWNER := qti
    
    
    LOCAL_SRC_FILES := memory_detect.c
    
    LOCAL_CFLAGS := -D_GNU_SOURCE
    
    LOCAL_PRELINK_MODULE := false
    LOCAL_MODULE_TAGS := optional
    LOCAL_PROPRIETARY_MODULE := true
    include $(BUILD_EXECUTABLE)
    
    

    之后推送到目标机,执行memory_detect 10 &后台执行即可(每隔10s收集一次剩余内存的比率)。待收集到足够的数据后,取出内存数据/data/memory.txt

    2.使用matplotlib绘制内存变化的趋势图,python的脚本memory.py如下:

    import matplotlib
    matplotlib.use('TkAgg')
    from matplotlib import pyplot as plt
    y_values = []
    
    file = open("memory.txt")
    line = file.readline()
    interval = int(line)
    print interval
    
    line = file.readline()
    while line:
        line = float(line)
        print line
        y_values.append(line)
        line = file.readline()
    
    x_values = []
    for i in range(len(y_values)):
        x_values.append(i*interval)
    
    plt.scatter(x_values, y_values, s=40)
    plt.title("memory usage tendency", fontsize=24)
    plt.xlabel("times", fontsize=14)
    plt.ylabel("memory usage ratio", fontsize=14)
    plt.axis([0, len(x_values*interval), 0, 1.0])
    plt.tick_params(axis='both', labelsize=14)
    plt.show()
    

    说明:memory_detect进程采集的第一个数据是每次数据收集的间隔时间(单位秒)
    3.查看内存变化趋势图
    在这里插入图片描述
    从上图中,能够很清晰的看出每隔2s采集的内存数据,剩余内存基本都维持在0.6左右

    展开全文
  • import requests import re import os import csv ...f = open(‘programming.csv’, ‘w’, newline=’’) writer = csv.DictWriter(f, [‘Programming’,‘Percent’,‘Date’]) writer.writeheader() ...
    import requests
    import re
    import os
    import csv
    url = 'https://www.tiobe.com/tiobe-index/'
    f = open('programming.csv', 'w', newline='')
    writer = csv.DictWriter(f, ['Programming','Percent','Date'])
    writer.writeheader()
    response = requests.get(url, )
    html = response.text
    result = ''.join(re.findall(r'series: (.*?)\}\);', html, re.DOTALL))
    result = re.findall(r'({.*?})', result, re.DOTALL)
    for item in result:
     name =''.join(re.findall(r"{name : '(.*?)'", item, re.DOTALL))
     data = re.findall(r"\[Date.UTC(.*?)\]", item, re.DOTALL)
     print(name)
     for i in data:
      i = i.replace(' ', '')
      i = re.sub(r'[()]', '', i)
      value = i.split(',')[-1]
      time_list = i.split(',')[:3]
      time = ""
      for index, j in enumerate(time_list):
       if index !=0:
        if len(j) == 1:
         j = '0' + j
       if index == 0:
        time += j
       else:
        time += '-' + j
      temp = {
       'Programming': name,
       'Percent': value,
       'Date': time
      }
      writer.writerow(temp)
    f.close()
    
    import pandas as pd
    import matplotlib.pyplot as plt
    import matplotlib.animation as animation
    from IPython.display import HTML
    
    df = pd.read_csv('programming.csv')
    
    colors=dict(zip(['C','Python','Java','C++','C#','Visual Basic','JavaScript','Assembly language','PHP','SQL'],
                   ['#adb0ff','#ffb3ff','#90d595','#e48381','#aafbff','#f7bb5f','#eafb50','#23ffab','#abff12','#afbb90']))
    current_date='2021-04-02'
    fig,ax=plt.subplots(figsize=(15,8))
    def draw_barchart(date):
        dff=(df[df['Date'].eq(date)].sort_values(by='Percent',ascending=True).head(10))
        ax.clear()
        ax.barh(dff['Programming'],dff['Percent'],color=[colors[x] for x in dff['Programming']])
        ax.text(1,0.4,date,transform=ax.transAxes,size=46,ha='right')
        
    #draw_barchart(current_date)
    
    animator=animation.FuncAnimation(fig,draw_barchart,frames=sorted(list(set(df['Date'].values))))
    #animator.save('temp.gif')
    #animator.to_html5_video('temp.mp4')
    HTML(animator.to_jshtml())
    
    
    

    在这里插入图片描述

    展开全文
  • 模拟实时动态趋势

    2019-09-21 23:25:21
    主要用到echart插件实现趋势图绘制,为了模拟实时效果,并且保证趋势图匀速移动,实现主要思想如下: 1.为保证匀速移动,趋势图的移动以前端时间间隔为准,时间间隔到了,趋势图就移动一次,不管后台数据正常返回...
  • 最近要做一些前台的数据展示, 用到了HighCharts.我这次做的是趋势图,涉及到series数组动态设置, 动态刷新 . 为了便于记忆,在这里记录一下。
  • 想要实现点击一个按钮,跳转到echart显示页面,动态从后台接口获取数据,显示趋势图。参考了原文章,并做了一定的简化修改。 1、页面( 下载echarts.min.js的链接,提取码:w4sv。) Echart官网链接 <script ...
  • 一、程序说明1、自定义血压变化趋势图classMyCanvas 继承 Canvas类,重写其中的public void paint(Graphics g)方法,里边绘制详细的界面组件外观。2、主类TrendChart 继承 JFrame,设定布局,添加文本框和输入框,...
  • 用 Plotly 动态柱状来演示全球疫情变化趋势各位同学早上好,我是 Lemonbit 。终于收到付费阅读的邀请了,今天发点技术类的干货,这篇文章后面需要付费阅读,收费就象征性的吧,看...
  • 在头条、抖音等短视频平台,经常看见使用条形展示数据变化趋势的视频,比如展示各国GDP变化,各地楼价变化,各地工资变化等等。其实使用Power BI不用十分钟就能完成制作。 一、本例原始数据 原始数据为销售...
  • 趋势图(2013)

    2019-01-26 08:45:47
    vs2013 vc++ 双曲线趋势图,模拟生产数据,动态生成实时数据。
  • #动态生成代码 x= [] x2=[] y1=[] y2=[] #原代码 for i in range(20000): batch = mnist.train.next_batch(50) train_loss, train_op_ = sess.run([loss, train_op], {input_x: batch[0], output_y: batch...
  • 一、程序说明1、自定义血压变化趋势图classMyCanvas 继承 Canvas类,重写其中的public void paint(Graphics g)方法,里边绘制详细的界面组件外观。2、主类TrendChart 继承 JFrame,设定布局,添加文本框和输入框,...
  • 参考d3js.org的Health&Wealth实例(http://bost.ocks.org/mike/nations/)按照... 需要展示的json: [{"calendar":"2012-01-01 12:00:00", "values":[{"name":"A","size":100,"traffic":"20000","cpu":12.9}, {
  • java动态曲线,2016年 7 个最佳的 java 框架,java画曲线,java做统计曲线java 动态曲线,2016年 7 个最佳的 java 框架,java做统计曲线,java画曲线()); 柱状 DEMO: package com.cons.jfreechart; import ...
  • 一、程序说明1、自定义血压变化趋势图classMyCanvas 继承 Canvas类,重写其中的public void paint(Graphics g)方法,里边绘制详细的界面组件外观。2、主类TrendChart 继承 JFrame,设定布局,添加文本框和输入框,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 862
精华内容 344
关键字:

动态趋势图