# [  V. S6 E" M! I- i; H　　该设计使用STM32F103RC对芯片内部温度进行转换并通过串口输出，本人经过各种查资料使用VS2010自己编写了一个简单的串口数据接收应用程序，该程序在接收到串口的温度过后同时在为该温度记录一个时间点并保存到一个txt文件中。浏览器则每隔2秒中定时向服务器请求数据，而服务器则读取txt文件的数据并返回给浏览器。　　浏览器使用EXTJS编写，串口数据接收和服务器使用C#编写。视频演示：http://www.tudou.com/programs/view/pSgeUkYjc0I/


' J% C0 ^  ]3 a9 J. V

浏览器显示波形是怎么做的，感觉很不错啊

小丁^_^ 发表于 2014-11-15 22:19
浏览器显示波形是怎么做的，感觉很不错啊

网页显示是使用的ExtJs，用这个做波形图就简单的像是在office上做波形图一样，只是默认的比较丑，优化界面的时候加一些代码而已。

1. Ext.onReady(function () {
   & u2 F# f& m! }: a+ p0 B; u3 \. s1 h
2.         var runner = new Ext.util.TaskRunner();
   
3.         Ext.define('User',{
   
4.            extend:'Ext.data.Model',
   5 j( e7 S- Q4 l0 ]
5.            fields:['Tmp','Tim']
   % Q4 H8 q* D+ c+ Y% C2 d
6.         });
   
7.         store=Ext.create('Ext.data.Store',{
   
8.           model:'User',
   ) v3 t" i. {4 a' A1 v7 ~. y" U
9.           autoLoad:true,
   - a! c& f: m9 H8 U5 H) _0 V
10.           proxy:{
    
11.             type:'ajax',
    
12.             url: 'http://127.0.0.1:8080/ServiceRelease/text/?token=hu/v7ky8RTzYlYJrNZGUr+7jhP8Tl0md',
    # p' U6 ~4 A# h& s+ t+ N
13.            reader:{
    5 M! M; d, J( _7 o; i* {
14.                root:'data'
    
15.             }
    
16.           }
    2 s7 ?) Z& B  e/ L
17.         });
    
18.         
    
19. var b1 = Ext.create("Ext.Window",{
    
20.         width:600,
    
21.         height:500,
    ( Z% o; g* J0 U9 y2 C, ]
22.         title:'芯片内部温度图',
    . e7 d0 _/ B  `
23.         shadow:false,
    * E! R5 C0 l8 M  q/ U
24.         maximizable:true,
    
25.         layout:'fit',
    
26.         items:[{
    
27.                 xtype:'chart',
    9 ^6 \% ~5 q/ B' l1 r
28.                 style:'background:#fff',//控制背景颜色
    5 S3 _5 ^% y& W/ i2 u/ U& C. s
29.                 animate :true,//运行动画
    % D/ T4 K6 V7 t3 F
30.                 shadow : true,
    / |" U, d. `- g$ K+ ~! h: m2 P) b
31.                 theme:"Category1",//皮肤
    * q" X6 ?. E$ z
32.                 store:store,
    1 b: Z$ `6 Y8 q( c
33.         axes:[{
    
34.                 type:'Numeric',
    
35.                 position:'left',//放置到左边
    / ~  D9 D2 y+ p: A  W3 @! M  o
36.                 dashSize:5,//引导线的宽度设置
    ! }. B; [' S6 d6 v9 n* K4 X  a
37.                 title:'温度曲线(TM)',
    9 k! i) h. Y: Q/ u; U1 N
38.                 fields:['Tmp'],//显示的数据索引
    . o$ r7 z. ~3 o( a; ^# {) i
39.                 majorTickSteps:5,
    
40.                 minorTickSteps:6,
    0 f+ B0 O9 W6 o: r0 Q( j$ U
41.                 grid:{
    
42.                         odd:{//奇数行
    - R; r3 L& T; k; @$ Y! ~' w
43.                                 opacity:1,//不透明
    
44.                                 'stroke-width':0.5//表格线宽
    
45.                         },
    
46.                         even:{//偶数行
    
47.                                 opacity:1,//不透明
    
48.                                 stroke:'#DDD',
    
49.                                 'stroke-width':0.5//表格线宽
    
50.                         }
    - y6 O6 Y7 ^9 `* A/ ?
51.                 }
    
52.         },{
    ) }8 @' p& N3 e) F3 K
53.                 type:'Category',
    
54.                 position:'bottom',
      p0 ?1 y' t" y7 J' T! P; B9 P
55.                 fields:['Tim'],
    
56.                 title:'时间',
    ; Y( C. r: R: h8 P2 j& p- \
57.                 grid:true
    
58.         }],//轴
    
59.         series:[{
    ! g3 [2 G+ M1 N$ }& T
60.                 type:'line',
    
61.                 axis:'left',
    7 C) M) j' ?: @5 M2 e
62.                        xField: 'Tim',
    4 s) q4 h5 a! a
63.                 yField: 'Tmp',
    
64.                 highlight:true,
    ( {+ [! |8 e. t; L, U
65.                 tips:{
    
66.                           trackMouse: true,
    
67.                           width: 240,
    
68.                           height: 28,
    3 V% m. ^' K& A* x$ d
69.                           renderer: function(storeItem, item) {
    6 q1 z2 @8 k$ F* J
70.                             this.setTitle('在'+storeItem.get('Tim') + '温度是： ' +
    
71.                             storeItem.get('Tmp') + '摄氏度');
    6 w' [! e  L6 g( |( z: h8 L
72.                           }
    
73.                 }
    
74.         }]//序列
    
75.         }]
    
76. }).show();      
    
77.         
    
78.      var task = {
    . T2 _7 e5 t7 W3 v
79.                             run: function(){store.reload();
    * |0 s. s1 S& [0 }9 N' L
80.                             },
    
81.                             interval: 1000 //1 second
      I2 B* Y8 U& Z/ ~! K) E
82.                         };
    
83.                 runner.start(task);
    
84.         
    
85.     });

复制代码