- 浏览: 613085 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
月光杯:
问题解决了吗?
Exceptions in HDFS -
iostreamin:
神,好厉害,这是我找到的唯一可以ac的Java代码,厉害。
[leetcode] word ladder II -
standalone:
One answer I agree with:引用Whene ...
How many string objects are created? -
DiaoCow:
不错!,一开始对这些确实容易犯迷糊
erlang中的冒号 分号 和 句号 -
standalone:
Exception in thread "main& ...
one java interview question
Unlike extjs 3, pie chart of Extjs 4 can be customized according to your requirment.
For example, in my application, I need to customize pie chart's legend to show a combination of both category and its count.(Default it will show only category.)
So I hacked extjs library, create my own Legend, I'm a newbie in extjs, but my solution works!!!
Define my own Legend MyPieChartLegend :
Ext.define('Ext.chart.MyPieChartLegend', { extend: 'Ext.chart.Legend',
override the createItems function:
Ext.each([].concat(series.yField), function(field, j) { var count = []; //1 var store = chart.store; //2 store.each(function(rec){ //3 count.push(rec.get(series.field)); //4 }); //5 item = new Ext.chart.NewLegendItem({ //6 legend: this, series: series, surface: chart.surface, yFieldCount: count[j], //6 yFieldIndex: j });
Note that, the lines ending with comments are newly added or changed code. Here I also use my own NewLegendItem which extends 'Ext.chart.LegendItem' . In original code, yField of the legend stores categories the store provides, e.g., ['apple', 'orange', ...], when creating legend item, yFieldIndex is used to get corresponding category name, so we can similiarly add an extra yFieldCount field to the config object.
My own NewLegendItem :
Ext.define('Ext.chart.NewLegendItem', {
mainly modifies the createLegend function:
createLegend: function(config) { var me = this, index = config.yFieldIndex, count = config.yFieldCount, // line 1 series = me.series, seriesType = series.type, idx = me.yFieldIndex, legend = me.legend, surface = me.surface, refX = legend.x + me.x, refY = legend.y + me.y, bbox, z = me.zIndex, markerConfig, label, mask, radius, toggle = false, seriesStyle = Ext.apply(series.seriesStyle, series.style); function getSeriesProp(name) { var val = series[name]; var ret = Ext.isArray(val) ? val[idx] : val; // line 2 ret = ret? (ret + " (" + count + ")") : ret; // line 3 return ret; } label = me.add('label', surface.add({ type: 'text', x: 20, y: 0, zIndex: z || 0, font: legend.labelFont, text: getSeriesProp('title') || getSeriesProp('yField') }));
You can see the change is very simple, I just append (count) to the category name. So now I get things like
apple (10)
orange (5)
See the picture below for illustration.
Also, you can customize other things I think, for instance, the label.
发表评论
-
Date/Time处理函数总结 [To Do]
2013-04-12 10:46 724几种我所用到的用来处理日期,时间的函数总结。 Perl 1 ... -
AngularJS
2013-03-22 14:37 0Separation of controller and vi ... -
Execution Context in JavaScript
2013-01-18 22:46 1415Do you know the output of the c ... -
Secrets of the JavaScript Ninja -- 1
2013-01-17 17:03 947Chapter 3 Scoping and function ... -
使用ExtJS做动画效果
2012-11-15 15:11 1229这是个动画效果的例子,作出一个小球弹跳然后静止. 先是一个d ... -
ExtJs Event Delegation
2012-11-15 14:06 1235Event handlers are a common cau ... -
ExtJS 的event handler的scope
2012-11-14 22:00 2160var button = Ext.create('Ext. ... -
Ext.bind() 方法
2012-11-14 21:54 1933var cat = { sound: 'miaow', ... -
extjs mixin example
2012-11-14 17:29 1426//1. Define our simple mixin ... -
What's the difference between a jQuery object and a DOM element?
2012-09-28 17:26 909http://http://stackoverflow.com ... -
How to make extjs grid selectable
2012-07-05 14:42 1112Ext.core.Element.prototype.un ... -
Using rowexpander in extjs4
2012-01-31 16:35 2991Add code snippe below to your g ... -
Javascript Replace innerHTML throwing Unknown Runtime Error
2011-11-30 12:18 990Quite annoying...IE sucks... ... -
Faster InnerHTML
2011-11-23 17:18 986http://blog.stevenlevithan.c ... -
jquery lazy loading
2011-10-26 15:24 1605最近玩了一下jquery,主要是在做的一个小工具要在一个web ... -
Pie Chart With Small Value Renders Incorrectly in IE
2011-09-02 14:26 991这个bug是我在使用extjs 4的pie chart的时候发 ... -
javascript中的==和===
2011-07-25 10:43 0总结得非常好的。 http://liwenbing.cn/t ... -
Great HTML5 Example
2011-07-07 18:05 1178This author shows how to draw i ... -
ajax css optimization
2011-04-15 12:59 922http://blog.zimbra.com/blog/arc ... -
javascript the definitive guide
2011-04-09 22:04 01. character set: unicode 2. c ...
相关推荐
其中,Chart组件是ExtJS 4中的一个重要部分,它提供了丰富的图表类型,包括曲线图,帮助开发者创建动态、交互式的数据展示。在这个“extjs 4chart”主题中,我们将深入探讨ExtJS 4中曲线图的实现与应用。 首先,让...
ExtJs 4 的 D3js 饼图 演示: : 如何使用 将 sass 文件/sass/src/ux/chart/series/D3Pie.scss复制到您的项目中; 将js文件/app/ux/chart/series/D3Pie.js复制到你的项目中; 更改类名'Sandbox.ux.chart.series....
在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....
这个项目里面包含了本人从开始初学EXTJS4的全部事例:grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释,还有一个file.txt文件是本人的小小总结,还没完整。我也是一个第一...
EXTJS 是一款强大的JavaScript前端框架,它提供了丰富的组件库,包括图表(chart)功能,用于展示数据可视化。在EXTJS中,折线图(line chart)是一种常见的图表类型,常用于展示趋势或时间序列数据。本篇文章将深入...
在4.2版本中,ExtJS 的图表功能得到了进一步的增强,为用户提供了多种图表类型,其中柱状图(Bar Chart)是常用的一种,用于展示分类数据的定量信息。 柱状图通过不同长度的柱子来表示数据值,每一根柱子代表一个...
ExtJs 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件,如数据网格、表格、图表、窗体等,使得开发者能够创建功能丰富的、交互性强的前端应用。本压缩包文件中收集了基于...
### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...
在本文中,我们将深入探讨如何在ExtJS4中利用Ajax数据源来绘制线形图表(Line chart)。ExtJS是一个强大的JavaScript库,专为构建富客户端应用程序而设计,它提供了丰富的图表组件,使得数据可视化变得简单易行。让...
标题中的“ssh+extjs4小项目”指的是一个基于SSH框架和ExtJS 4的轻量级Web应用程序。SSH是Spring、Struts2和Hibernate三个开源框架的组合,它们在Java Web开发中广泛使用,提供了模型-视图-控制器(MVC)架构的支持...
EXTJS4是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性...
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...
在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...
EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...
### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...
ExtJS4正式版(官方完整下载包):含所有的源代码,html,api文档,示例。官方网站下载现在需要注册,这个仅供爱好者个人学习使用,如果项目中使用请至官方网站购买。
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
Extjs4.0学习笔记.pdf 是电子书格式的,可以下载看看
本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...
在ExtJS中,饼图可以通过`Ext.chart.Chart`类和`Ext.chart.series.Pie`系列配置来创建。你可以设置各个扇区的颜色、标签和值,还可以添加交互性,如点击扇区时显示详细信息。例如,你可以通过以下代码创建一个简单的...