[Ext JS 4] 组件之图表| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] 组件之图表

## [Ext JS 4] 组件之图表
### 前言
图表用来更直观的呈现数据，通常它可以很好的呈现出数据之间的关系。
在Ext JS 4中， 图表的类使用绘图包开发的surfaces(表面)和sprites(精灵)。 这也就说，它们的底层技术都是SVG, VML 或 HTML 5 Canvas 的绘图技术。
每一个图表必须要三个组成部分： 数据(data), 轴(axes)和系列(Series)。
数据 -  是图表用来展示的信息，在Ext 中使用标准的Model 或是 Store.
轴 - 提供数据的来源，范围，规模和单位。组成图表的基本架构。 轴可以是笛卡尔坐标(x,y), 极性(或径向)，或轨距(用于仪表盘图表的一维轴)。尽管一个结合多个类型系列的图表需要额外的轴定义，但大多数的图表还是使用一组轴。
系列- 这个属于是用于数据的图形渲染的。换句话说，就是一个图标的基本图形项目，像 线图，柱状图，栏位或饼图。一个图形可以包含多个系列。 例如： 在一个图形的中有三个线状图就包含有三个独立的线系列。
可以添加标签，标记和图例说明到图上；还可以设置动画效果或是放大某一个区块。
label(标签) -- 对一个轴或是系统的解释性标题。
marker(标记) -- 用来在一个系列中绘制数据点的一个符号，形状或是图片。
legend(说明) -- 提供图的说明，解释各变量在图形中代表的意义。
listeners(监听器)--等待某个事件并作出一些动作像鼠标事件等
animation( 动画)--  图的元素可以移动

### 创建一个简单的图表
每一个图表最少包含三个关键且独立的部分
1. 一个Model（模型）和一个Store。Model是用来描述数据的结构，store 这个某个类型数据的集合。
当Store的数据改变是，图表的展现也可以自动的更新。
2. 一组Axes （轴）， 用来描述图表的边界。
3. 一个或多个Series(系列)。用来处理数据的渲染。 一个图表的多个系列可以使用相同的轴。

定义一个图表的步骤如下：
1. 定义一个Model ,创建一个Store
2.定义一个Chart并配置一些基本信息，把store 绑定到Chart
3. 在图上定义axes
4. 在图上定义Series

以下以实例来介绍，
定义一个Model ,创建一个Store
这里创建一个天气预报的模型， 包含两个字段： “temperature” 和 “date”.
```javascript
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: {
name: 'temperature', type: 'int'
name: 'date', }
]
});
```
type: 'int' 用来指定栏位的类型，类型指定不强制，但是最好是加上。
接下来，创建一个Store, 这个 Store 包含一组以上定义的 “WeatherPoint‘的模型实例。一般而言，  Store 的数据都是动态加载的，这里为了方便，之间使用内联数据：
```javascript
var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
        { temperature: 58, date: newDate(2013, 1, 1, 8) },
        { temperature: 63, date: newDate(2013, 1, 1, 9) },
        { temperature: 73, date: newDate(2013, 1, 1, 10) },
        { temperature: 78, date: newDate(2013, 1, 1, 11) },
        { temperature: 81, date: newDate(2013, 1, 1, 12) }
    ]
});
```

### 创建一个图表对象
```javascript
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store
});
```
如果在浏览器中，查看效果的话，应该是一片空白 ，因为还没有设置轴和系列。
配置轴
轴是定义图表现是的边界线。这里的图表使用标准的直角坐标轴， y 轴定义成数字类型，x 轴定义成日期类型。
```javascript
Ext.create('Ext.chart.Chart', {
    ...
axes: [
        {
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
        },
        {
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'ga'
        }
    ]
});
```
“Temperature”轴位于图形的左边，代表温度的范围值， 最小是0，最大是100.

### 配置系列
最后就是配置一个或多个系列了。系列负责图形的数据的显示形式
```javascript
Ext.create('Ext.chart.Chart', {
    ...
axes: [
        ...
    ],
series: [
        {
type: 'line',
xField: 'date',
yField: 'temperature'
        }
    ]
});
```
这个系列是一个线系列。使用 “date”和 “temperature”栏位。

### Themes(主题)
可以定义 一个 Ext.chart.Theme theme给图表用来控制图表的样式和格式。 也可以对不同的组件进行样式配置达到相同的效果，但是，主题把一组样式放入一个包中，可以应用到其他的图表中。你可以定义一个完整的主题，包含多个样式元素，然后通过引入样式的名字导入到图表中，类似如下：
```javascript
Ext.create('Ext.chart.Chart', {
...
theme: 'Green',
...
});

```

### Ext JS 图表的编码
基本的代码结构如下：
```javascript
var chart = Ext.create('Ext.chart.Chart', {
// Definitions for the Chart, including the data Store
    },
axes: [{
// Definitions for the first Axis
    }, {
// Definitions for the second Axis (if any)
       }
    }],
series: [{
// Definitions for the first Series
        }
    }]
series: [{
// Definitions for the second Series (if any)
        }
    }]
series: [{
// Definitions for additional Series (if any)
        }
    }]
});
```

Ext.chart.axis.Axis 是主要的轴的类，分为四种类型
Category -- 非数值的类别
Numerical -- 数值类别
Time -- Numerical的子类，用于时间
Gauge -- 用于显示仪表盘的一维数据。

再来看一下系列的值的类别
Ext.chart.series -- defines the Series to use
Ext.chart.series.Series -- abstract class for logic common to all chart series
Ext.chart.series.Area -- creates a Stacked Area Chart
Ext.chart.series.Bar -- 条图
Ext.chart.series.Cartesian -- base class for series implementationsthat plot values using x/y coordinates(ref page lacks content)
Ext.chart.series.Column -- 柱形图
Ext.chart.series.Gauge -- 仪表图
Ext.chart.series.Line -- 线状图
Ext.chart.series.Pie -- 饼图
Ext.chart.series.Scatter -- 散点图

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] 组件之图表

网站导航