extjs4 饼图案例
2013-08-07 14:46
169 查看
建议用chrome或firefox打开 ie有可能有兼容性问题
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>独乐不如众乐</title> <link href='http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css' rel='stylesheet' type='text/css' /> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { // 随机测试数据的生成 function generateData() { var data = [{ 'name' : 'metric one' }, { 'name' : 'metric two' }, { 'name' : 'metric three' }, { 'name' : 'metric four' }, { 'name' : 'metric five' }]; data.forEach(function(e, i, self) { e['data'] = Math.round(Math.random() * 100); }); return data; } var store = Ext.create('Ext.data.JsonStore', { fields : ['name', 'data'] }); store.loadData(generateData()); var donut = false; // chart饼图的容器 var chart = Ext.create('Ext.chart.Chart', { xtype : 'chart', animate : true, store : store, shadow : true, legend : { position : 'right' }, // 跟padding有点类似 饼图距离面板边的长度 insetPadding : 60, theme : 'Base:gradients', // 饼图的设置 series : [{ type : 'pie', field : 'data', showInLegend : true, donut : donut, // 鼠标经过时的显示的tips tips : { trackMouse : true, width : 140, height : 28, renderer : function(storeItem, item) { // calculate percentage. var total = 0; store.each(function(rec) { total += rec.get('data'); }); this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%'); } }, // 高亮时 扇形偏移距离 highlight : { segment : { margin : 20 } }, // 文字配置 label : { field : 'name', display : 'rotate', contrast : true, font : '18px Arial' } }] }); var panel = Ext.create('widget.panel', { width : 800, height : 600, title : 'Semester Trends', renderTo : Ext.getBody(), layout : 'fit', tbar : [{ text : 'Save Chart', handler : function() { Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice) { if (choice == 'yes') { chart.save({ type : 'image/png' }); } }); } }, { text : 'Reload Data', handler : function() { store.loadData(generateData()); } }, { enableToggle : true, pressed : false, text : 'Donut', toggleHandler : function(btn, pressed) { //chart.series是一个Ext.util.MixedCollection chart.series.first().donut = pressed ? 35 : false; chart.refresh(); } }], items : chart }); }); </script> </head> <body> </body> </html>
相关文章推荐
- 学习ExtjsForVs(第一个案例HelloWord)
- Extjs编辑器案例
- Extjs3.4 带复选框的树结构(Tree+checkbox)案例
- ExtJS学习:MVC模式案例(一)
- Extjs编辑器案例
- extjs官网+extjs官网案例
- ExtJS学习:MVC模式案例(二)
- Extjs树的各种玩法案例
- Extjs案例--员工信息填写界面布局
- ExtJS模板与菜单的使用案例-床位卡
- ExtJS学习:MVC模式案例(三)
- ExtJs4 Ext.util.Format.number 使用案例
- extjs官网+extjs官网案例
- Extjs案例---后台管理系统界面布局
- [导入]ExtJs 2.0 构建的rss新闻 案例
- ExtjsDemo--gridpannel 调用绑定本地data同时删除行案例
- ExtJS4组件_Grid配置-属性-方法详解-案例
- Sencha Touch 和 extjs 优秀客户案例:DecidoKompetensor & “Impossible”项目
- ExtJS学习:MVC模式案例(四)
- ExtJS学习:MVC模式案例(五)