highcharts 渲染到ext4.0组件以及动态获得后台图表数据

highcharts

api: http://www.highcharts.com/ref/#highcharts-object

下载资源 http://download.csdn.net/detail/wwwyuanliang10000/4220776

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="../Extjs4/highcharts.src.js"></script>
        <script type="text/javascript" src="../Extjs4/exporting.js"></script>

1.第一步骤： 在html文件中定义适配器 如下：  

[html]  view plain copy

1.      <style type="text/css">  
2.             .container {  
3.                 width: 1000px;  
4.                 height:550px;  
5.                 display: none;  
6.             }  
7.         </style>  
8.           
9.   
10.   
11.   
12.       <div id="containerId">  
13.             <div id="container1" class="container"></div>  
14.       </div>  

2. 第二步骤 准备 highcharts(柱状图)  工作 ，这个动作可以用方法加以调用  如下，

[javascript]  view plain copy

1.     <pre name="code" class="javascript">     var containerId = "#container1";  
2.      $(containerId).css('display','block');</pre> <br>  
3. <pre name="code" class="javascript">     window.panelStore2 = Ext.create('Ext.data.Store', {  
4.           fields:['name',{name:'preStatics',type:'int'},'mypercent'],  
5.           proxy: {  
6.                 type: 'ajax',  
7.                 url: extPath+'/center!getDetailByType.action?random='+new Date().getTime()+''+'&type=2',  
8.                 reader: {  
9.                     type: 'json',  
10.                     root: 'humresData',  
11.                     totalProperty: 'totalCount'  
12.                 }  
13.            },  
14.           autoLoad: false,  
15.           sorters:[{  
16.             property:"name",  
17.             direction:"asc"  
18.           },{  
19.                 property:"preStatics",  
20.                 direction:"asc"  
21.           }],  
22.           listeners:{  
23.                  beforeload:function(store,records,successful,operation,opts){  
24.                       msgTip = Ext.MessageBox.show({  
25.                           title:'提示',  
26.                           closable:false,  
27.                           width : 250,  
28.                           msg:'页面统计信息刷新中,请稍后...'  
29.                       });  
30.                  },  
31.                 load:function(store,records,successful,operation,opts){  
32.                         if(successful){  
33.                             var years = [];  
34.                     var values = [];  
35.                     store.each(function(rec){  
36.                     years.push(parseInt(rec.get('name')));  
37.                         values.push(parseInt(rec.get('preStatics')));  
38.                      });  
39.                     initCharts1(years,values);  
40.                             Ext.Msg.alert('提示','数据加载成功!');  
41.                             msgTip.hide();  
42.                               
43.                         }else{  
44.                               
45.                             Ext.Msg.alert('提示','数据加载失败!');  
46.                             msgTip.hide();  
47.                         }  
48.                           
49.                     }  
50.           }  
51.     });  
52.     //--------------------------------------------------------------------------------------//  
53.      function  initCharts1(years,values){  
54.           var chart = new Highcharts.Chart({  
55.                 chart: {  
56.                     renderTo: 'container1',  
57.                     type: 'column'  
58.                 },  
59.                 title: {  
60.                     text: '申请日 按年统计'  
61.                 },  
62.                 subtitle: {  
63.                     text: 'Source: http://www.eastlinden.com/'  
64.                 },  
65.                 xAxis: {  
66.                     categories: years  
67.                 },  
68.                 yAxis: {  
69.                     min:0,    
70.                     title: {  
71.                         text: '专利数'  
72.                     }  
73.                 },  
74.                 legend: {  
75.                     layout: 'vertical',  
76.                     backgroundColor: '#FFFFFF',  
77.                     align: 'left',  
78.                     verticalAlign: 'top',  
79.                     x: 100,  
80.                     y: 70,  
81.                     floating: true,  
82.                     shadow: true  
83.                 },  
84.                 tooltip: {  
85.                     formatter: function() {  
86.                         return ''+ this.x +': '+ this.y +'';  
87.                     }  
88.                 },  
89.                 plotOptions: {  
90.                     column: {  
91.                         pointPadding: 0.2,  
92.                         borderWidth: 0  
93.                     }  
94.                 },  
95.                 series: [{  
96.                     name: '按年统计',  
97.                     data: values  
98.                       
99.                 }]  
100.             });  
101.       }</pre>  
102. <pre></pre>  
103. <span style="font-size:18px; color:#FF0000">3.  第三步骤 准备我们所渲染到图表的组件 panel 如下：</span>  
104. <p></p>  
105. <p></p>  
106. <pre name="code" class="html">//申请日按年统计  
107.     var mypanel1 = Ext.define('mypanel1', {  
108.         extend:'Ext.panel.Panel',  
109.         bodyPadding: 5,  
110.         id:'mypanel1Id',  
111.         width: 1200,  
112.         baseCls:'x-plain',  
113.         border:false,  
114.         autoScroll:true,  
115.         items:[  
116.             {  
117.                 layout: {  
118.                  type:'column',  
119.                              columns: 1  
120.                      },  
121.             defaults: { width:600, height: 600,margin:'5 5 5 5'},  
122.             items:[{  
123.             id:'appDate',  
124.                 title:'分布图',  
125.                 width:1000,  
126.                 rowspan:1,  
127.            <span style="color:#FF0000;"><strong>     contentEl: 'container1' //和HighCharts </strong></span>  
128.                 //items:[chartnumber1]  
129.             }]  
130.   
131.         }]  
132.     });</pre><br>  
133. <span style="font-size:24px"><strong>二、 <span style="padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; color:rgb(0,0,0); outline-width:0px; outline-style:initial; outline-color:initial; text-decoration:none">  
134. highcharts做柱状图，怎样设置柱子宽度？</span></strong></span><br>  
135. <p></p>  
136. <p></p>  
137. <pre name="code" class="javascript">plotOptions: {  
138.                     column: {  
139.                         pointPadding: 0.2,  
140.                         borderWidth: 0,  
141.                         pointWidth:5 //设置柱子的宽度  
142.                      }  
143.              }</pre><br>  
144. <br>  
145. <p></p>  
146. <pre></pre>  
147. <pre></pre>  
148. <pre></pre>  
149. <pre></pre>  
150. <pre></pre>  
151. <pre></pre>  
152. <pre></pre>  
153. <pre></pre>  
154. <pre></pre>