好看的玄幻小说_[Ext JS 4] 組件之圖表| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 組件之圖表

## [Ext JS 4] 組件之圖表
### 前言
圖表用來(lái)更直觀(guān)的呈現數據，通常它可以很好的呈現出數據之間的關(guān)系。
在Ext JS 4中， 圖表的類(lèi)使用繪圖包開(kāi)發(fā)的surfaces(表面)和sprites(精靈)。 這也就說(shuō)，它們的底層技術(shù)都是SVG, VML 或 HTML 5 Canvas 的繪圖技術(shù)。
每一個(gè)圖表必須要三個(gè)組成部分： 數據(data), 軸(axes)和系列(Series)。
數據 -  是圖表用來(lái)展示的信息，在Ext 中使用標準的Model 或是 Store.
軸 - 提供數據的來(lái)源，范圍，規模和單位。組成圖表的基本架構。 軸可以是笛卡爾坐標(x,y), 極性(或徑向)，或軌距(用于儀表盤(pán)圖表的一維軸)。盡管一個(gè)結合多個(gè)類(lèi)型系列的圖表需要額外的軸定義，但大多數的圖表還是使用一組軸。
系列- 這個(gè)屬于是用于數據的圖形渲染的。換句話(huà)說(shuō)，就是一個(gè)圖標的基本圖形項目，像 線(xiàn)圖，柱狀圖，欄位或餅圖。一個(gè)圖形可以包含多個(gè)系列。 例如： 在一個(gè)圖形的中有三個(gè)線(xiàn)狀圖就包含有三個(gè)獨立的線(xiàn)系列。
可以添加標簽，標記和圖例說(shuō)明到圖上；還可以設置動(dòng)畫(huà)效果或是放大某一個(gè)區塊。
label(標簽) -- 對一個(gè)軸或是系統的解釋性標題。
marker(標記) -- 用來(lái)在一個(gè)系列中繪制數據點(diǎn)的一個(gè)符號，形狀或是圖片。
legend(說(shuō)明) -- 提供圖的說(shuō)明，解釋各變量在圖形中代表的意義。
listeners(監聽(tīng)器)--等待某個(gè)事件并作出一些動(dòng)作像鼠標事件等
animation( 動(dòng)畫(huà))--  圖的元素可以移動(dòng)

### 創(chuàng  )建一個(gè)簡(jiǎn)單的圖表
每一個(gè)圖表最少包含三個(gè)關(guān)鍵且獨立的部分
1. 一個(gè)Model（模型）和一個(gè)Store。Model是用來(lái)描述數據的結構，store 這個(gè)某個(gè)類(lèi)型數據的集合。
當Store的數據改變是，圖表的展現也可以自動(dòng)的更新。
2. 一組Axes （軸）， 用來(lái)描述圖表的邊界。
3. 一個(gè)或多個(gè)Series(系列)。用來(lái)處理數據的渲染。 一個(gè)圖表的多個(gè)系列可以使用相同的軸。

定義一個(gè)圖表的步驟如下：
1. 定義一個(gè)Model ,創(chuàng  )建一個(gè)Store
2.定義一個(gè)Chart并配置一些基本信息，把store 綁定到Chart
3. 在圖上定義axes
4. 在圖上定義Series

以下以實(shí)例來(lái)介紹，
定義一個(gè)Model ,創(chuàng  )建一個(gè)Store
這里創(chuàng  )建一個(gè)天氣預報的模型， 包含兩個(gè)字段： “temperature” 和 “date”.
```javascript
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: {
name: 'temperature', type: 'int'
name: 'date', }
]
});
```
type: 'int' 用來(lái)指定欄位的類(lèi)型，類(lèi)型指定不強制，但是最好是加上。
接下來(lái)，創(chuàng  )建一個(gè)Store, 這個(gè) Store 包含一組以上定義的 “WeatherPoint‘的模型實(shí)例。一般而言，  Store 的數據都是動(dòng)態(tài)加載的，這里為了方便，之間使用內聯(lián)數據：
```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) }
    ]
});
```

### 創(chuàng  )建一個(gè)圖表對象
```javascript
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: store
});
```
如果在瀏覽器中，查看效果的話(huà)，應該是一片空白 ，因為還沒(méi)有設置軸和系列。
配置軸
軸是定義圖表現是的邊界線(xiàn)。這里的圖表使用標準的直角坐標軸， y 軸定義成數字類(lèi)型，x 軸定義成日期類(lèi)型。
```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.

### 配置系列
最后就是配置一個(gè)或多個(gè)系列了。系列負責圖形的數據的顯示形式
```javascript
Ext.create('Ext.chart.Chart', {
    ...
axes: [
        ...
    ],
series: [
        {
type: 'line',
xField: 'date',
yField: 'temperature'
        }
    ]
});
```
這個(gè)系列是一個(gè)線(xiàn)系列。使用 “date”和 “temperature”欄位。

### Themes(主題)
可以定義 一個(gè) Ext.chart.Theme theme給圖表用來(lái)控制圖表的樣式和格式。 也可以對不同的組件進(jìn)行樣式配置達到相同的效果，但是，主題把一組樣式放入一個(gè)包中，可以應用到其他的圖表中。你可以定義一個(gè)完整的主題，包含多個(gè)樣式元素，然后通過(guò)引入樣式的名字導入到圖表中，類(lèi)似如下：
```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 是主要的軸的類(lèi)，分為四種類(lèi)型
Category -- 非數值的類(lèi)別
Numerical -- 數值類(lèi)別
Time -- Numerical的子類(lèi)，用于時(shí)間
Gauge -- 用于顯示儀表盤(pán)的一維數據。

再來(lái)看一下系列的值的類(lèi)別
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 -- 線(xiàn)狀圖
Ext.chart.series.Pie -- 餅圖
Ext.chart.series.Scatter -- 散點(diǎn)圖

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS 4] 組件之圖表

網(wǎng)站導航