var store = Ext.create('Ext.data.JsonStore', { fields: ["finish_value","status","base_code","score","dept_name","index_unit","id","index_name","dept_id","index_code","index_weight","base_name","index_goal"], totalProperty : 'totalProperty', autoDestroy: true, autoLoad: true, proxy: { type: 'ajax', url: 'LeaderShow.do?method=getLeaderShow&index_code=0461c13d5f8e431e978969c98af8afb0&base_code=201200&check_type=1', reader: { type: 'json', root: 'images', idProperty: 'name' } } }); Ext.onReady(function() { var panel3 = Ext.create('widget.panel', { width: 600, height: 300, title: 'ExtJS.com Visits Trends, 2007/2008 (Full styling)', renderTo: Ext.getBody(), layout: 'fit', items: { xtype: 'chart', animate: false, store: store, insetPadding: 30, gradients: [{ angle: 90, id: 'bar-gradient', stops: { 0: { color: '#99BBE8' }, 70: { color: '#77AECE' }, 100: { color: '#77AECE' } } }], axes: [{ type: 'Numeric', minimum: 0, maximum: 100, position: 'left', fields: ["finish_value"], grid: true, label: { font: '10px Arial' }, title:'数值' }, { type: 'Category', position: 'bottom', fields: ['dept_name'], title:'部门', grid: true/*, label: { font: '11px Arial', renderer: function(name) { return name.substr(0, 3); } }*/ }], series: [{ type: 'column', axis: 'left', xField: 'dept_name', yField: 'finish_value', style: { fill: 'url(#bar-gradient)', 'stroke-width': 3 }, markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: '#38B8BF', stroke: '#38B8BF' }, tips: { trackMouse: true, width: 100, height: 130, renderer: function(storeItem, item) { var dept_name = storeItem.get('dept_name'); var index_name = storeItem.get('index_name'); var base_name = storeItem.get('base_name'); var index_goal = storeItem.get('index_goal'); var index_unit = storeItem.get('index_unit'); var finish_value = storeItem.get('finish_value'); var index_weight = storeItem.get('index_weight'); var score = storeItem.get('score'); this.setTitle("部门:"+dept_name+"</br>指标:"+index_name+"</br>频度:"+base_name+"</br>目标值:"+index_goal+"</br>单位:"+index_unit+"</br>完成值:"+finish_value+"</br>权重:"+index_weight+"</br>评分:"+score); } } }/*, { type: 'line', axis: 'left', xField: 'dept_name', yField: 'finish_value' }*/] } }); });
相关推荐
根据给定的信息,我们可以分析出该段代码与柱状图数据获取及处理有关。下面将对这段代码涉及的关键知识点进行详细解析。 ### 关键知识点 #### 1. 动作方法(Action Method) 该方法被`@Action("bingCount")`注解...
在ExtJS 4.2中创建柱状图,首先你需要引入相关的类库,包括`Ext.chart.*`,这通常通过在页面中加载相应的CSS和JavaScript文件来实现。接下来,定义一个包含数据的Store,这个Store将提供图表的数据源。数据可以是...
FusionCharts+ext实现的3D效果的柱状图,饼状图
在ExtJS中,柱状图是Ext.chart.Chart组件的一种类型,它可以帮助开发者直观地呈现复杂的数据集,使用户能够快速理解数据的分布和趋势。 首先,我们需要了解ExtJS框架。ExtJS是由Sencha公司开发的一个JavaScript库,...
本例子将关注如何使用Ext JS 3.x版本创建柱状图,包括设置固定值和动态从后台获取数据来绘制图表。 首先,我们需要理解柱状图的基本概念。柱状图是一种图形,用垂直或水平的矩形条表示数据类别和相应的数量。在Ext ...
4. **强大的图表库**:EXT包含一个完整的图表组件,可以生成各种统计和数据分析图表,如折线图、柱状图、饼图等。 5. **触摸支持**:EXT4.2.1优化了对触摸设备的支持,使得在平板电脑和智能手机上也能流畅操作。 6. ...
5. **图表组件**:EXT 3.0引入了图表组件,支持多种图表类型,如柱状图、饼图、线图等,用于数据可视化。 6. **拖放功能**:EXT提供了完善的拖放支持,允许用户轻松地实现元素间的拖放操作。 7. **国际化**:EXT库...
这些图表包括折线图、柱状图、饼图、散点图、面积图等,能够满足大多数数据可视化的需要。通过这些图表,用户可以直观地理解大量复杂数据。 在实现图形报表时,首先需要了解Ext.chart.Chart组件,它是ExtJS图表的...
6. **Charts**:EXT的图表模块,用于创建丰富的可视化图表,如柱状图、饼图、线图等。 在提供的“ext2中文文档新春版”中,很可能是EXT2版本的相关文档,EXT2是EXT的一个早期版本,可能包含了详细的API文档、教程和...
7. 图表和仪表盘:用于数据可视化,支持各种图表类型,如柱状图、饼图、线图等。 8. 动画和特效:EXT提供了丰富的动画API,可以实现平滑的界面过渡和交互反馈。 EXT 3.2.0是这个模板所基于的版本,这个版本稳定且...
8. 图表(Charts):EXT 3.3的图表组件,如何创建各种统计图表,如柱状图、折线图等。 9. 性能优化(Performance Optimization):提供了一些提高EXT 3.3应用程序性能的技巧和策略。 10. API参考(API Reference):...
6. **图表和可视化**:EXT的图表组件在4.1版本中得到了增强,支持多种图表类型,如折线图、柱状图、饼图等,便于进行数据可视化。 7. **主题和皮肤**:EXT4.1提供了多种预定义的主题,如gray、silver、triton等,...
Charts是EXT3.0中的一个亮点,它支持各种类型的图表,如柱状图、折线图、饼图和散点图。通过API,开发者可以自定义图表的颜色、样式、数据源和交互行为,为数据可视化提供强大的工具。 除此之外,EXT3.0还包括了...
5. **图表组件**:Ext的图表组件支持创建各种复杂的统计图表,如折线图、柱状图、饼图等,有助于数据可视化。 6. **触摸支持**:Ext Touch是针对移动设备的版本,提供了一套专为触摸屏优化的组件和API,使开发者...
5. **图表绘制**:EXT的图表组件(Charts)能够生成各种统计图表,如柱状图、饼图、线图等,方便数据可视化。文档中包含了图表的配置选项和使用示例。 6. **事件处理**:EXT的事件模型允许开发者通过监听和响应事件...
4. **高级图表**:EXT提供了多种图表类型,如折线图、柱状图、饼图等,可用于数据可视化。 5. **触摸支持**:EXT Touch是EXT的移动版本,专门用于开发触屏设备上的应用程序。 6. **AJAX通信**:EXT内置了AJAX功能...
6. **Charts**:EXT 3.0 提供了图表组件,支持各种类型的图表,如柱状图、折线图、饼图等,可用于数据可视化。 7. **Ajax**:EXT内建的Ajax模块提供了一种简便的方式与服务器进行异步通信,可以处理JSON、XML等多种...
5. **图表和图形**:Ext包含了一个强大的图表组件库,支持各种类型的图表,如线图、柱状图、饼图等。这些Demo将展示如何配置和使用图表,以及如何动态更新数据。 6. **可拖放功能**:Ext支持可拖放操作,允许用户在...
1. **图表类型**:EXT JS支持多种图表类型,包括线图、柱状图、饼图、散点图、雷达图、仪表盘等。这些图表可以用来展示数据的分布、趋势和比较,满足不同场景的需求。 2. **数据绑定**:EXT JS Charts可以与数据源...