你的位置:首页 > Java教程

[Java教程]Extjs 融合highcharts


最近看ext的东西,讲真,快把人看哭了,封装的太死,各种不灵活,写得心好累。直接贴代码吧

创建一个panel

var panel = new Ext.Panel({      id:'main-panel',      baseCls:'x-plain',      layout:'hbox',      items:[{        html:'<div id="container" ></div>',        afterRender: function () {          drawCharts();        }}      ]    });

drawCharts中的方法就是普通的hightcharts渲染图表的方法

function drawCharts(){   var options = {        chart: {          plotBackgroundColor: null,          plotBorderWidth: null,          plotShadow: false,          renderTo:'container',          type:'column'        },         legend: {            layout: 'vertical',            align: 'right',            verticalAlign: 'middle',            borderWidth: 0          },        title: {          text: ''        },      tooltip: {         pointFormat:{series.name}: <b>{point.percentage:.1f}%</b>'        },        labels:{          items:[{            html:'',            style: {              left:'1px',              top:'1px',                    }          }],          style:{            color:'red',            fontSize:45,            fontWeight:'bold',            zIndex:1000          }        },        series: [{        name: 'Browser share',        data: [          ['Firefox',  45.0],          ['IE',    26.8],          {            name: 'Chrome',            y: 12.8,            sliced: true,            selected: true          },          ['Safari',  8.5],          ['Opera',   6.2],          ['Others',  0.7]        ]      }]      };          new Highcharts.Chart(options);}

最后效果如下