Ext.js组件:Chart 图表

图表用于以图形格式表示数据。 以下是Ext JS提供的不同图表：

编号	图表
1	Pie Chart 由于名称表示此图表用于以饼图格式表示数据。
2	Line Chart 此图表用于以线图格式表示数据。
3	Bar Chart 此图表用于以条形图格式表示数据。
4	Area Chart 此图表用于以面积图形式表示数据。

1.Ext.js 饼图

描述

此图表用于表示饼图格式的数据。它是一个极坐标图。

语法

这里是简单的语法。

 

 Ext.create('Ext.chart.PolarChart', {
 series: [{
   Type: 'pie'
   ..
   }]
   render and other properties.
 });

 

例

下面是一个简单的例子显示用法。

 

 

2. Ext.js 折线图

描述

此图表用于以线图格式表示数据。 它是一个笛卡尔图表。

语法

这里是简单的语法。

 

Ext.create('Ext.chart.CartesianChart',{
   series: [{
      type: 'line',
      xField: 'name',
      yField: 'G1'
      }]
      render, legend and other properties
});

 

例

下面是一个简单的例子显示用法。

 

这将产生以下结果

3. Ext.js 条形图

描述

此图表用于以条形图格式表示数据。 它是一个笛卡尔图表。

语法

这里是简单的语法。

 

Ext.create('Ext.chart.CartesianChart',{
   series: [{
      type: 'bar',
      xField: 'name',
      yField: 'G1'
      }]
      render, legend and other properties
});

 

例

下面是一个简单的例子显示用法。

 

这将产生以下结果

4. Ext.js 区域图

描述

此图表用于以区域图形格式表示数据。 它是一个笛卡尔图表。

语法

这里是简单的语法。

 

Ext.create('Ext.chart.CartesianChart',{
   series: [{
      type: 'area',
      xField: 'name',
      yField: 'G1'
      }]
      render, legend and other properties
});

 

例

下面是一个简单的例子显示用法。

 

这将产生以下结果