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
plaincopy

<style type="text/css">

.container {

width: 1000px;

height:550px;

display: none;

}

</style>

<div id="containerId">

<div id="container1" class="container"></div>

</div>

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

[javascript] view
plaincopy

<pre name="code" class="javascript"> var containerId = "#container1";

$(containerId).css('display','block');</pre> <br>

<pre name="code" class="javascript"> window.panelStore2 = Ext.create('Ext.data.Store', {

fields:['name',{name:'preStatics',type:'int'},'mypercent'],

proxy: {

type: 'ajax',

url: extPath+'/center!getDetailByType.action?random='+new Date().getTime()+''+'&type=2',

reader: {

type: 'json',

root: 'humresData',

totalProperty: 'totalCount'

}

},

autoLoad: false,

sorters:[{

property:"name",

direction:"asc"

},{

property:"preStatics",

direction:"asc"

}],

listeners:{

beforeload:function(store,records,successful,operation,opts){

msgTip = Ext.MessageBox.show({

title:'提示',

closable:false,

width : 250,

msg:'页面统计信息刷新中,请稍后...'

});

},

load:function(store,records,successful,operation,opts){

if(successful){

var years = [];

var values = [];

store.each(function(rec){

years.push(parseInt(rec.get('name')));

values.push(parseInt(rec.get('preStatics')));

});

initCharts1(years,values);

Ext.Msg.alert('提示','数据加载成功!');

msgTip.hide();

}else{

Ext.Msg.alert('提示','数据加载失败!');

msgTip.hide();

}

}

}

});

//--------------------------------------------------------------------------------------//

function initCharts1(years,values){

var chart = new Highcharts.Chart({

chart: {

renderTo: 'container1',

type: 'column'

},

title: {

text: '申请日 按年统计'

},

subtitle: {

text: 'Source: http://www.eastlinden.com/'
},

xAxis: {

categories: years

},

yAxis: {

min:0,

title: {

text: '专利数'

}

},

legend: {

layout: 'vertical',

backgroundColor: '#FFFFFF',

align: 'left',

verticalAlign: 'top',

x: 100,

y: 70,

floating: true,

shadow: true

},

tooltip: {

formatter: function() {

return ''+ this.x +': '+ this.y +'';

}

},

plotOptions: {

column: {

pointPadding: 0.2,

borderWidth: 0

}

},

series: [{

name: '按年统计',

data: values

}]

});

}</pre>

<pre></pre>

<span style="font-size:18px; color:#FF0000">3. 第三步骤 准备我们所渲染到图表的组件 panel 如下：</span>

<p></p>

<p></p>

<pre name="code" class="html">//申请日按年统计

var mypanel1 = Ext.define('mypanel1', {

extend:'Ext.panel.Panel',

bodyPadding: 5,

id:'mypanel1Id',

width: 1200,

baseCls:'x-plain',

border:false,

autoScroll:true,

items:[

{

layout: {

type:'column',

columns: 1

},

defaults: { width:600, height: 600,margin:'5 5 5 5'},

items:[{

id:'appDate',

title:'分布图',

width:1000,

rowspan:1,

<span style="color:#FF0000;"><strong> contentEl: 'container1' //和HighCharts </strong></span>

//items:[chartnumber1]

}]

}]

});</pre><br>

<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">

highcharts做柱状图，怎样设置柱子宽度？</span></strong></span><br>

<p></p>

<p></p>

<pre name="code" class="javascript">plotOptions: {

column: {

pointPadding: 0.2,

borderWidth: 0,

pointWidth:5 //设置柱子的宽度

}

}</pre><br>

<br>

<p></p>

<pre></pre>

<pre></pre>

<pre></pre>

<pre></pre>

<pre></pre>

<pre></pre>

<pre></pre>

<pre></pre>

<pre></pre>