[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”.

Ext.define('WeatherPoint', {
    extend: 'Ext.data.Model',
    fields: {
         name: 'temperature', type: 'int' 
         name: 'date', }
]
});

type: 'int' 用来指定栏位的类型，类型指定不强制，但是最好是加上。

接下来，创建一个Store, 这个 Store 包含一组以上定义的 “WeatherPoint‘的模型实例。一般而言，  Store 的数据都是动态加载的，这里为了方便，之间使用内联数据：

var store = Ext.create('Ext.data.Store', {
    model: 'WeatherPoint',
    data: [
        { temperature: 58, date: new Date(2013, 1, 1, 8) },
        { temperature: 63, date: new Date(2013, 1, 1, 9) },
        { temperature: 73, date: new Date(2013, 1, 1, 10) },
        { temperature: 78, date: new Date(2013, 1, 1, 11) },
        { temperature: 81, date: new Date(2013, 1, 1, 12) }
    ]
});

创建一个图表对象

Ext.create('Ext.chart.Chart', {
   renderTo: Ext.getBody(),
   width: 400,
   height: 300,
   store: store
});

如果在浏览器中，查看效果的话，应该是一片空白 ，因为还没有设置轴和系列。

配置轴

轴是定义图表现是的边界线。这里的图表使用标准的直角坐标轴， y 轴定义成数字类型，x 轴定义成日期类型。

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.

配置系列

最后就是配置一个或多个系列了。系列负责图形的数据的显示形式

Ext.create('Ext.chart.Chart', {
    ...
    axes: [
        ...
    ],
    series: [
        {
            type: 'line',
            xField: 'date',
            yField: 'temperature'
        }
    ]
});

这个系列是一个线系列。使用 “date”和 “temperature”栏位。

Themes(主题)

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

Ext.create('Ext.chart.Chart', {
...
theme: 'Green',
...
});

Ext JS 图表的编码

基本的代码结构如下：

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 -- 散点图