extjs4刚下的（a）

# 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