# Drawing and Charting
______________________________________________
This document is intended to guide you through the overall design and implementation details
of the Drawing and Charting packages. The drawing and charting packages enable you to create
cross browser and cross device graphics in a versatile way.
The structure of this document will cover three main topics:
- Section I: ["Draw"]() a versatile cross-browser/device package to draw general purpose
graphics and animations.
- Section II: ["Chart"]() A high level presentation of the charting package and how classes are
organized in it.
- Section III: ["Series"]() A presentation of the available series and their use.
## I. The Draw Package
______________________
The design choices in the graphics team concerning drawing were not just contrained to charting:
we needed a versatile tool that would enable us to create custom graphics in a cross-browser/device manner and also perform rich animations with them.
The Draw package contains a [Surface]() class that abstracts the underlying graphics implementation
and enables the developer to create arbitrarily shaped [Sprites]() or [SpriteGroups]() that respond to
interactions like mouse events and also provide rich animations on all attributes like shape, color, size,
etc.
The underlying/concrete implementations for the [Surface]() class are [SVG]() (for SVG capable browsers) and
[VML]() (for the Internet Explorer family - < 9). [Surface]() can be considered as an interface for
the [SVG]() and [VML]() rendering engines. Surface is agnostic to its underlying implementations. Most of the methods and ways
to create sprites are heavily inspired by the [SVG standard](http://www.w3.org/TR/SVG/).
**Creating a Drawing Surface**
You can create a simple drawing surface without loading the Charting package at all. This can be useful
to create arbitrary graphics that work on all browsers/devices and animate well. For example, you could
create an interactive map of the United States where each state is a sprite, or also an infographic where
each element is also a sprite. What's interesting about making sprites and not images is that the document
acquires a new level of interactivity but also that being VML and SVG based the images will never loose quality
and can be printed correctly.
In order to use the Draw package directly you can create a [Draw Component]() and (for example) append it to an `Ext.Window`:
var drawComponent = Ext.create('Ext.draw.Component', {
viewBox: false,
items: [{
type: 'circle',
fill: '#ffc',
radius: 100,
x: 100,
y: 100
}]
});
Ext.create('Ext.Window', {
width: 230,
height: 230,
layout: 'fit',
items: [drawComponent]
}).show();
In this case we created a draw component and added a sprite to it. The *type* of the sprite is *circle* so if you run this code
you'll see a yellow-ish circle in a Window. When setting `viewBox` to `false` we are responsible for setting the object's position and
dimensions accordingly.
Sprites can have different types. Some of them are:
- *circle* - To draw circles. You can set the radius by using the *radius* parameter in the sprite configuration.
- *rect* - To render rectangles. Tou can set the width and height of the rectangle by using the *width* and *height* parameters
in the sprite configuration.
- *text* - To render text as a sprite. You can set the font/font-size by using the *font* parameter.
- *path* - The most powerful sprite type. With it you can create arbitrary shapes by using the [SVG path syntax](http://www.w3.org/TR/SVG/paths.html).
You can find a quick tutorial on to how to get started with
the path syntax [here](https://developer.mozilla.org/en/SVG/Tutorial/Paths).
**Interacting with a Sprite**
Now that we've created a draw surface with a sprite in it, let's dive into how to interact with the sprite.
We can get a handle to the sprite we want to modify by adding that sprite imperatively to the surface:
//create a draw component
var drawComponent = Ext.create('Ext.draw.Component', {
viewBox: false
});
//create a window to place the draw component in
Ext.create('Ext.Window', {
width: 220,
height: 230,
layout: 'fit',
items: [drawComponent]
}).show();
//add a circle sprite
var myCircle = drawComponent.surface.add({
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
});
//now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
fill: '#ccc'
}, true);
//or animate an attribute on the sprite
myCircle.animate({
to: {
fill: '#555'
},
duration: 2000
});
//add a mouseup listener to the sprite
myCircle.addListener('mouseup', function() {
alert('mouse upped!');
});
In this example we've seen how we can add events, set sprite attributes and animate these attributes using the
draw package. As you can see this package is a versatile abstraction layer over the graphics we can do. What's
most interesting about this class is that we aren't tied to a specific shape or structure; also all elements
support events, setting attributes and creating animations. Most important of all, all of this is compatible in all browsers and
devices.
## II. Charts
So now that we learnt about the expressive power of the draw package, let's dive into charts. The chart
package consists of a hierarchy of classes that define a chart container (something like a surface but more specific for
handling charts); axes, legends, series, labels, callouts, tips, cartesian and radial coordinates, and specific series
like [Pie](), [Area](), [Bar](), etc.
In this section we will cover how these classes are tied together and what bits of functionality go into each of these
classes. We won't cover each particular series, since that is done in the next section.
**Chart**
The Chart class is the main drawing surface for series. It manages the rendering of each series and also how axes are
drawn and defined. Chart also delegates mouse events over to different areas of the Chart like Series, Axes, etc.
The [Chart class]() extends [Draw Component]().
A Chart instance has access to:
- axes - Accessed through `chart.axes`. All the axes being defined and drawn for this visualization. This is a mixed collection.
- series - Accessed through `chart.series`. All the series being drawn for the chart. This could be line, bar, scatter, etc. This is also a mixed collection.
- legend - The legend box object and its legend items.
The chart instance supports custom events that can be triggered right before and during the rendering of the visualization.
We can add handlers for these events by using:
chart.on({
'refresh': function() {
alert('(re)drawing the chart');
}
});
Chart also delegates events like `itemmousedown` and `itemmouseup` to the series so that we can append
listeners to those objects and get the target sprite of the event.
**Legend**
The chart configuration object accepts a `legend` parameter to enable legend items for each series and
to set the position of the legend. These options are passed into the constructor of the chart. For example:
var chart = Ext.create('Ext.chart.Chart', {
width: 200,
height: 200,
//set a legend
legend: {
position: 'left'
},
//define axes
axes: [/*set an axis configuration*/],
//define series
series: [/*set series configuration*/]
});
Each series object needs to have the `showInLegend` parameter set to `true` in order to be in the legend list.
**Axis**
The `axis` package contains an `Abstract` axis class that is extended by `Axis` and `Radial` axes. `Axis` represents
a `Cartesian` axis and `Radi
没有合适的资源?快使用搜索试试~ 我知道了~
extjs4刚下的(a)
共1772个文件
js:808个
gif:404个
png:239个
3星 · 超过75%的资源 需积分: 9 74 下载量 25 浏览量
2011-03-28
13:14:25
上传
评论
收藏 8.07MB ZIP 举报
温馨提示
extjs4,大家都来看看啊!!!!!!!!!!!
资源推荐
资源详情
资源评论
收起资源包目录
extjs4刚下的(a) (1772个子文件)
Ext-mess.backup 21KB
Ext-mess.backup 21KB
ext-sandbox.css 239KB
ext-all-scoped.css 235KB
ext-all-debug.css 222KB
ext-ie-scoped.css 220KB
ext-ie.css 207KB
ext-standard-scoped.css 172KB
ext-standard.css 164KB
ext-all.css 137KB
desktop.css 13KB
screen.css 12KB
welcome.css 10KB
extjs.css 8KB
Feed-Viewer.css 3KB
Feed-Viewer.css 3KB
statusbar.css 3KB
layout-browser.css 2KB
ie.css 2KB
basic.css 2KB
example.css 1KB
link-icons.css 1KB
print.css 1KB
toolbars.css 1KB
toolbar.css 1KB
ext-guide.css 1KB
release-notes.css 1KB
portal.css 1KB
data-view.css 1KB
menus.css 1KB
button.css 700B
progress-bar.css 402B
DataView-more.css 328B
multiple-sorting.css 314B
qtips.css 251B
slider.css 218B
welcome_ie6.css 193B
NestedLoading.css 183B
CenterLayout.css 164B
tabs.css 144B
tabs-adv.css 136B
resizer.css 123B
list-view.css 57B
panel.css 46B
working-with-charts.gif 115KB
desktop.gif 62KB
chart-area.gif 13KB
chart-mixed.gif 13KB
chart-area-browser.gif 13KB
form-registration.gif 12KB
chart-themed.gif 12KB
chart-bar.gif 12KB
chart-line.gif 12KB
chart-bar-stacked.gif 12KB
chart-radar.gif 12KB
chart-column.gif 11KB
chart-bar-renderer.gif 11KB
chart-radar-fill.gif 11KB
form-checkout.gif 11KB
chart-pie.gif 11KB
chart-pie-renderer.gif 10KB
form-contact.gif 9KB
chart-scatter.gif 9KB
keyboard.gif 8KB
area-browsers.gif 8KB
form-custom-access.gif 7KB
resizable.gif 7KB
data-view.gif 7KB
form-grid-binding-access.gif 7KB
restful-thumb.gif 7KB
themes.gif 7KB
form-dashboard.gif 7KB
desktop.gif 6KB
border-layout.gif 6KB
panel.gif 6KB
draw-tiger.gif 6KB
grid-row-editor.gif 6KB
air.gif 6KB
sandbox.gif 6KB
direct.gif 6KB
grid-paging.gif 6KB
chooser.gif 6KB
tasks.gif 6KB
combo-custom.gif 6KB
buttons.gif 6KB
organizer.gif 6KB
tabs.gif 5KB
grid-locking.gif 5KB
tool-sprites.gif 5KB
feeds.gif 5KB
progress-bar-pager.gif 5KB
tab-panel-scroller-menu.gif 5KB
gmap-panel.gif 5KB
pivotgrid.gif 5KB
writer-thumb.gif 5KB
column2.gif 5KB
slider-pager.gif 5KB
grid-xml.gif 5KB
forum.gif 5KB
pivotgrid-cellcls.gif 5KB
共 1772 条
- 1
- 2
- 3
- 4
- 5
- 6
- 18
资源评论
- jevons2372018-11-08多年前下载的
haha33521cs1
- 粉丝: 1
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功