星空网 > 软件开发 > 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);}

最后效果如下

Extjs 融合highcharts

 

 




原标题:Extjs 融合highcharts

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

物流单号:https://www.goluckyvip.com/tag/43618.html
物流到fba:https://www.goluckyvip.com/tag/43619.html
零库存:https://www.goluckyvip.com/tag/4362.html
物流到越南专线:https://www.goluckyvip.com/tag/43620.html
物流德国专线:https://www.goluckyvip.com/tag/43621.html
物流发货:https://www.goluckyvip.com/tag/43622.html
武陵山大裂谷周围景点 武陵山大裂谷周围景点图片:https://www.vstour.cn/a/411233.html
南美旅游报价(探索南美洲的旅行费用):https://www.vstour.cn/a/411234.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流