更新記錄
轉載請注明出處:https://www.cnblogs.com/cqpanda/p/16587398.html
2022年8月16日 發布。
2022年8月13日 從筆記遷移到博客。
ExtJS教程匯總：https://www.cnblogs.com/cqpanda/p/16328016.html
Chart（圖表）說明
圖表的類型（Chart types）
說明
three types of charts: cartesian, polar, and spacefilling（笛卡爾、極坐標和空間填充）
cartesian chart
Ext.chart.CartesianChart (xtype: cartesian or chart)
A cartesian chart has two directions: X and Y. By default, X is horizontal and Y is vertical. Charts that use the cartesian coordinates are column, bar, area, line, and scatter
polar chart
Ext.chart.PolarChart (xtype: polar)
These charts have two axes: angular and radial. Charts that plot values using the
polar coordinates are pie and radar
spacefilling chart
Ext.chart.SpaceFillingChart (xtype: spacefilling)
These charts fill the complete area of the chart
圖表的組成
Series定義圖形的內容
Axes定義圖表的軸
Legend定義圖表的圖例
Labels定義圖表的標簽
Interactions定義圖表的交互
Sprite定義圖表的標題等元素
定義Legend
legend: {
docked: 'left' //可取值left, top, bottom, right
}
使用前準備
如果是直接引入的CSS和JS方式進行ExtJS開發
將build目錄下的packages目錄復制到開發目錄下
需要額外引入圖形組件的css和js文件
<!-- 引入CSS文件 -->
<link rel="stylesheet" href=/packages/charts/modern/modern-material/resources/charts-all-debug.css">
<!-- 引入JS文件 -->
<script src="/packages/charts/modern/charts-debug.js"></script>
常用圖表
折線圖（Line Chart）
語法：
Ext.create('Ext.chart.CartesianChart',{
series: [{
type: 'line',
xField: 'name',
yField: 'G1'
}]
//render, legend and other properties
});
條形圖（Bar Chart）
Ext.create('Ext.chart.CartesianChart',{
series: [{
type: 'bar',
xField: 'name',
yField: 'G1'
}]
//render, legend and other properties
});
餅圖（Pie Chart）
Ext.chart.PolarChart (xtype: polar)
語法：
Ext.create('Ext.chart.PolarChart', {
series: [{
Type: 'pie'
..
}]
//render and other properties.
});
面積圖（Area Chart）
Ext.create('Ext.chart.CartesianChart',{
series: [{
type: 'area',
xField: 'name',
yField: 'G1'
}]
//render, legend and other properties
});
實例：柱狀圖
實例：繪制柱狀圖（bar chart）
//創建對應的模型
Ext.define('PandaApp.model.WebSiteVisitor', {
extend: 'Ext.data.Model',
fields: [
{
name: 'name',
type: 'string'
},
{
name: 'value',
type: 'int'
}
]
});
//創建對應的數據存儲
Ext.define('PandaApp.store.WebSiteVisitors', {
extend: 'Ext.data.Store',
model: 'PandaApp.model.WebSiteVisitor',
data: [
{ name: '1', value: 50 },
{ name: '2', value: 154 },
{ name: '3', value: 166 },
{ name: '4', value: 189 },
{ name: '5', value: 199 },
{ name: '6', value: 175 },
{ name: '7', value: 165 },
{ name: '8', value: 126 },
{ name: '9', value: 112 },
{ name: '10', value: 109 },
{ name: '11', value: 87 },
]
});
//實例化
var store = Ext.create('PandaApp.store.WebSiteVisitors');
//創建圖形
Ext.define('PandaApp.view.chart.BarChart', {
extend: 'Ext.chart.Chart',
xtype: 'chart-BarChart',
config: {
animate: true,
store : store,
axes : [
{
type : 'numeric',
position: 'left',
fields : ['value'],
title : 'Value'
},
{
type : 'category',
position: 'bottom',
fields : ['name'],
title : 'Name'
}
],
series : [
{
type : 'bar',
axis : 'bottom',
xField: 'name',
yField: 'value'
}
]
}
});
Ext.create('PandaApp.view.chart.BarChart',{
renderTo: Ext.getBody(),
width: 800,
height: 600
});
實例：繪制柱狀圖2（bar chart）
//定義測試用的模型
Ext.define('PandaApp.model.Population', {
extend: 'Ext.data.Model',
fields: ['year', 'population']
});
//定義測試用的Store
Ext.define('PandaApp.store.Population', {
extend: 'Ext.data.Store',
storeId: 'population',
model: 'PandaApp.model.Population',
data: [ //內聯數據
{ "year": "1610","population": 350 },
{ "year": "1650","population": 50368 },
{ "year": "1700", "population": 250888 },
{ "year": "1750","population": 1170760 },
{ "year": "1800","population": 5308483 },
{ "year": "1900","population": 76212168 },
{ "year": "1950","population": 151325798 },
{ "year": "2000","population": 281421906 },
{ "year": "2010","population": 308745538 },
]
});
//創建Store實例
var store = Ext.create("PandaApp.store.Population");
//創建容器存放圖表組件
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
items: [
{
xtype: 'chart', //圖表組件
insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
store: store, //指定關聯的Store
axes: [ //創建軸
{
type: 'numeric', //數值類型的軸
position: 'left', //位置：左側
grid: true, //開啟網格
title: { text: 'Population in Millions', fontSize: 16 },
//指定軸描述
},
{
type: 'category', //分類類型的軸
title: { text: 'Year', fontSize: 16 }, //指定軸的描述
position: 'bottom', //指定軸的位置
}
],
series: [ //指定內容
{
type: 'bar', //指定類型為欄
xField: 'year', //x軸對應的Store數據字段
yField: ['population'] //y軸對應的Store數據字段
}
],
sprites: {
type: 'text',
text: 'United States Population', //指定標題
font: '25px Helvetica',
width: 120,
height: 35,
x: 100,
y: 40
}
}
]
});
實例：繪制柱狀圖3
代碼：
//創建測試使用Store
var myChartStore = Ext.create('Ext.data.ArrayStore',{
storeId:'salesStore', //定義Store的Id
fields:[ //定義字段
{name: 'id', type: 'int'},
{name: 'region', type: 'string'},
{name: 'sales', type: 'float'} ,
{name: 'salesb', type: 'float'}
],
data: [ //定義內聯數據
[10001 ,"North", 1500.55 , 1450.66 ],
[10002 ,"South", 2344.99 , 3200.45 ],
[10003 ,"East", 1750.44 , 950.55 ],
[10004 ,"West", 3000.00 , 3200.55 ],
[10005 ,"Central", 4523.45 , 1963.44 ],
[10006 ,"OverSeas", 2489.55, 2786.12 ]
]
});
//創建圖表
var mychart= Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 500,
height: 600,
store: myChartStore, //關聯的Store
insetPadding: { //配置內邊距
top: 50,
left: 25,
right: 25,
bottom: 15
},
interactions: 'itemhighlight', //配置交互
axes: [ //配置軸信息
{
type: 'numeric', //配置軸的類型
position: 'left', //配置軸的位置
title: { //配置軸的標題
text: 'Sales 1st to 3th Quarter', //配置軸標題的文本
fontSize: 14, //配置軸標題的字體
fillStyle:'#0d7179' //配置軸標題的顏色
},
fields: 'sales' //配置軸關聯的字段
},
{
type: 'category', //配置軸的類型
position: 'bottom', //配置軸的位置
title: {
text: 'Sales by Branch',
fontSize: 18,
fillStyle:'#277cc0'
},
fields: 'region'
}
],
series: { //配置圖表的內容
type: 'bar', //圖表類型為柱狀圖
title:['Main branch','Branch B'], //標題
xField: 'region', //x軸對應的數據
yField: 'sales', //y軸對應的數據
style:{ //配置風格
strokeStyle: '#999999',
fillStyle: '#cccc99'
},
highlight:{ //配置高亮
strokeStyle: '#990000',
fillStyle: '#ffcc66',
lineDash: [5, 3]
},
label: { //配置標簽
field:'sales',
display:'insideEnd'
}
},
sprites: {
type: 'text',
text: 'My Company - 2015',
fontSize: 22,
fillStyle: '#993366',
width: 100,
height: 30,
x: 40, // the sprite x position
y: 25 // the sprite y position
}
});
實例：繪制柱狀圖（橫向）
添加翻轉配置項到chart中
flipXY: true, //翻轉XY軸
在軸配置上，翻轉對應的軸的位置即可
//定義測試用的模型
Ext.define('PandaApp.model.Population', {
extend: 'Ext.data.Model',
fields: ['year', 'population']
});
//定義測試用的Store
Ext.define('PandaApp.store.Population', {
extend: 'Ext.data.Store',
storeId: 'population',
model: 'PandaApp.model.Population',
data: [ //內聯數據
{ "year": "1610","population": 350 },
{ "year": "1650","population": 50368 },
{ "year": "1700", "population": 250888 },
{ "year": "1750","population": 1170760 },
{ "year": "1800","population": 5308483 },
{ "year": "1900","population": 76212168 },
{ "year": "1950","population": 151325798 },
{ "year": "2000","population": 281421906 },
{ "year": "2010","population": 308745538 },
]
});
//創建Store實例
var store = Ext.create("PandaApp.store.Population");
//創建容器存放圖表組件
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
items: [
{
xtype: 'chart', //圖表組件
flipXY: true, //翻轉XY軸
insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
store: store, //指定關聯的Store
axes: [ //創建軸
{
type: 'numeric', //數值類型的軸
position: 'bottom', //位置：左側
grid: true, //開啟網格
title: { text: 'Population in Millions', fontSize: 16 },
//指定軸描述
},
{
type: 'category', //分類類型的軸
title: { text: 'Year', fontSize: 16 }, //指定軸的描述
position: 'left', //指定軸的位置
}
],
series: [ //指定內容
{
type: 'bar', //指定類型為欄
xField: 'year', //x軸對應的Store數據字段
yField: ['population'] //y軸對應的Store數據字段
}
],
sprites: {
type: 'text',
text: 'United States Population', //指定標題
font: '25px Helvetica',
width: 120,
height: 35,
x: 100,
y: 40
}
}
]
});
實例：繪制柱狀圖（多層堆疊）
代碼：
//定義測試使用的模型
Ext.define('PandaApp.model.Population', {
extend: 'Ext.data.Model',
fields: ['year', 'total','slaves']
});
//定義測試使用的數據倉庫
Ext.define('PandaApp.store.Population', {
extend: 'Ext.data.Store',
storeId: 'population',
model: 'PandaApp.model.Population',
data: [
{ "year": "1790", "total": 3.9, "slaves": 0.7 },
{ "year": "1800", "total": 5.3, "slaves": 0.9 },
{ "year": "1810", "total": 7.2, "slaves": 1.2 },
{ "year": "1820", "total": 9.6, "slaves": 1.5 },
{ "year": "1830", "total": 12.9, "slaves": 2 },
{ "year": "1840", "total": 17, "slaves": 2.5 },
{ "year": "1850", "total": 23.2, "slaves": 3.2 },
{ "year": "1860", "total": 31.4, "slaves": 4 },
]
});
//創建數據倉庫實例
var store = Ext.create("PandaApp.store.Population");
//創建容器存放圖表組件
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
items: [
{
xtype: 'cartesian', //設置圖表組件的類型
store: store, //設置關聯的Store
insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
axes: [ //配置軸
{
type: 'numeric', //數值軸
position: 'left', //配置軸位置左側
grid: true, //開啟網格
title: { text: 'Population in Millions', fontSize: 16 },
//軸描述
},
{
type: 'category', //分類類型軸
title: { text: 'Year', fontSize: 16 }, //軸描述
position: 'bottom', //配置軸位置底部
}
],
series: [ //配置圖表內容
{
type: 'bar', //
xField: 'year', //X軸對應的Store字段
yField: ['total','slaves'] //y軸對應的Store字段
}
],
sprites: { //圖表的標題
type: 'text',
text: 'United States Slaves Distribution 1790 to 1860',
font: '20px Helvetica',
width: 120,
height: 35,
x: 60,
y: 40
}
}
]
});
實例：繪制柱狀圖（多層并排）
代碼：
//定義測試使用的模型
Ext.define('PandaApp.model.Population', {
extend: 'Ext.data.Model',
fields: ['year', 'total','slaves']
});
//定義測試使用的數據倉庫
Ext.define('PandaApp.store.Population', {
extend: 'Ext.data.Store',
storeId: 'population',
model: 'PandaApp.model.Population',
data: [
{ "year": "1790", "total": 3.9, "slaves": 0.7 },
{ "year": "1800", "total": 5.3, "slaves": 0.9 },
{ "year": "1810", "total": 7.2, "slaves": 1.2 },
{ "year": "1820", "total": 9.6, "slaves": 1.5 },
{ "year": "1830", "total": 12.9, "slaves": 2 },
{ "year": "1840", "total": 17, "slaves": 2.5 },
{ "year": "1850", "total": 23.2, "slaves": 3.2 },
{ "year": "1860", "total": 31.4, "slaves": 4 },
]
});
//創建數據倉庫實例
var store = Ext.create("PandaApp.store.Population");
//創建容器存放圖表組件
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
items: [
{
xtype: 'chart',
legend: { docked: 'bottom' },
insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
store: store,
axes: [
{
type: 'numeric',
position: 'left',
grid: true,
title: { text: 'Population in Millions', fontSize: 16 },
minimum: 0,
},
{
type: 'category',
title: { text: 'Year', fontSize: 16 },
position: 'bottom',
}
],
series: [
{
type: 'bar',
xField: 'year',
stacked: false,
title: ['Total', 'Slaves'],
yField: ['total', 'slaves'],
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function (storeItem, item) {
this.setHtml('In ' + storeItem.get('year') + ' ' + item.field + ' population was ' + storeItem.get(item.field) + ' m');
}
}
}
],
sprites: [
{
type: 'text',
text: 'United States Slaves Distribution 1790 to 1860',
font: '20px Helvetica',
width: 120,
height: 35,
x: 60,
y: 40
},
{
type: 'text',
text: 'Source: http://www.wikipedia.org',
fontSize: 10,
x: 12,
y: 440
}
]
}
]
});
實例：繪制柱狀圖（3d）
代碼：
//定義測試使用的模型
Ext.define('PandaApp.model.Population', {
extend: 'Ext.data.Model',
fields: ['year', 'total','slaves']
});
//定義測試使用的數據倉庫
Ext.define('PandaApp.store.Population', {
extend: 'Ext.data.Store',
storeId: 'population',
model: 'PandaApp.model.Population',
data: [
{ "year": "1790", "total": 3.9, "slaves": 0.7 },
{ "year": "1800", "total": 5.3, "slaves": 0.9 },
{ "year": "1810", "total": 7.2, "slaves": 1.2 },
{ "year": "1820", "total": 9.6, "slaves": 1.5 },
{ "year": "1830", "total": 12.9, "slaves": 2 },
{ "year": "1840", "total": 17, "slaves": 2.5 },
{ "year": "1850", "total": 23.2, "slaves": 3.2 },
{ "year": "1860", "total": 31.4, "slaves": 4 },
]
});
//創建數據倉庫實例
var store = Ext.create("PandaApp.store.Population");
//創建容器存放圖表組件
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
items: [
{
xtype: 'chart',
legend: { docked: 'bottom' },
insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
store: store,
axes: [
{
type: 'numeric',
position: 'left',
grid: true,
title: { text: 'Population in Millions', fontSize: 16 },
minimum: 0,
},
{
type: 'category3d', //切換為3d分類類型
title: { text: 'Year', fontSize: 16 },
position: 'bottom',
}
],
series: [
{
type: 'bar3d', //切換為3d圖形
xField: 'year',
stacked: false,
title: ['Total', 'Slaves'],
yField: ['total', 'slaves'],
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function (storeItem, item) {
this.setHtml('In ' + storeItem.get('year') + ' ' + item.field + ' population was ' + storeItem.get(item.field) + ' m');
}
}
}
],
sprites: [
{
type: 'text',
text: 'United States Slaves Distribution 1790 to 1860',
font: '20px Helvetica',
width: 120,
height: 35,
x: 60,
y: 40
},
{
type: 'text',
text: 'Source: http://www.wikipedia.org',
fontSize: 10,
x: 12,
y: 440
}
]
}
]
});
實例：面積圖
實例：繪制面積圖
代碼：
//定義測試使用的模型
Ext.define('PandaApp.model.Population', {
extend: 'Ext.data.Model',
fields: ['year', 'total','slaves']
});
//定義測試使用的數據倉庫
Ext.define('PandaApp.store.Population', {
extend: 'Ext.data.Store',
storeId: 'population',
model: 'PandaApp.model.Population',
data: [
{ "year": "1790", "total": 3.9, "slaves": 0.7 },
{ "year": "1800", "total": 5.3, "slaves": 0.9 },
{ "year": "1810", "total": 7.2, "slaves": 1.2 },
{ "year": "1820", "total": 9.6, "slaves": 1.5 },
{ "year": "1830", "total": 12.9, "slaves": 2 },
{ "year": "1840", "total": 17, "slaves": 2.5 },
{ "year": "1850", "total": 23.2, "slaves": 3.2 },
{ "year": "1860", "total": 31.4, "slaves": 4 },
]
});
//創建數據倉庫實例
var store = Ext.create("PandaApp.store.Population");
//創建容器存放圖表組件
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
items: [
{
xtype: 'chart',
legend: { docked: 'bottom' },
insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
store: store,
axes: [
{
type: 'numeric',
position: 'left',
grid: true,
title: { text: 'Population in Millions', fontSize: 16 },
minimum: 0,
},
{
type: 'category',
title: { text: 'Year', fontSize: 16 },
position: 'bottom',
}
],
series: [
{
type: 'area', //面積圖
xField: 'year',
stacked: false,
title: ['Total','slaves'],
yField: ['total', 'slaves'],
style: {
stroke: "#94ae0a",
fillOpacity: 0.6,
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function (storeItem, item) {
this.setHtml('In ' + storeItem.get('year') + ' ' + item.field + ' population was ' + storeItem.get(item.field) + ' m');
}
}
}
],
sprites: [
{
type: 'text',
text: 'United States Slaves Distribution 1790 to 1860',
font: '20px Helvetica',
width: 120,
height: 35,
x: 60,
y: 40
},
{
type: 'text',
text: 'Source: http://www.wikipedia.org',
fontSize: 10,
x: 12,
y: 440
}
]
}
]
});
實例：繪制折線圖
實例：繪制折線圖（單條）
代碼：
//創建對應的模型
Ext.define('PandaApp.model.WebSiteVisitor', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Time', type: 'int' },
{ name: 'Visitors', type: 'int' }
]
});
//創建對應的數據存儲
Ext.define('PandaApp.store.WebSiteVisitors', {
extend: 'Ext.data.Store',
model: 'PandaApp.model.WebSiteVisitor',
data: [ //直接內聯數據
{ Time: '1', Visitors: 50 },
{ Time: '2', Visitors: 154 },
{ Time: '3', Visitors: 166 },
{ Time: '4', Visitors: 189 },
{ Time: '5', Visitors: 199 },
{ Time: '6', Visitors: 175 },
{ Time: '7', Visitors: 165 },
{ Time: '8', Visitors: 126 },
{ Time: '9', Visitors: 112 },
{ Time: '10', Visitors: 109 },
{ Time: '11', Visitors: 87 },
]
});
//創建數據存儲實例
var store = Ext.create('PandaApp.store.WebSiteVisitors');
//創建圖形
Ext.define('PandaApp.view.chart.SiteVisits', {
extend: 'Ext.chart.CartesianChart',
xtype: 'chart-SiteVisits',
config: {
animate: true, //開啟動畫效果
store : store, //定義關聯Store
series : [ //定義圖形類型
{
type : 'line', //折線圖
smooth: true, //是否平滑
axis : 'left', //軸的位置
xField: 'Time', //x軸的標題
yField: 'Visitors' //y軸的標題
}
],
axes : [ //定義軸
{
type : 'numeric', //數值類型的軸
grid : true, //開啟網格
position : 'left', //位置
fields : ['Visitors'], //內容
title : 'Visitors', //標題
minimum : 0, //最小值
maximum : 200, //最大值
majorTickSteps: 5
},
{
type : 'numeric',
position : 'bottom',
fields : 'Time',
title : 'Time',
minimum : 0,
maximum : 20,
decimals : 0,
constrain : true,
majorTickSteps: 20
}
]
}
});
//實例化圖形
Ext.create('PandaApp.view.chart.SiteVisits',{
renderTo: Ext.getBody(),
width: 800,
height: 600
});
實例：繪制折線圖（多條）
代碼：
//定義測試使用的模型
Ext.define('PandaApp.model.Population', {
extend: 'Ext.data.Model',
fields: ['year', 'total','slaves']
});
//定義測試使用的數據倉庫
Ext.define('PandaApp.store.Population', {
extend: 'Ext.data.Store',
storeId: 'population',
model: 'PandaApp.model.Population',
data: [
{ "year": "1790", "total": 3.9, "slaves": 0.7 },
{ "year": "1800", "total": 5.3, "slaves": 0.9 },
{ "year": "1810", "total": 7.2, "slaves": 1.2 },
{ "year": "1820", "total": 9.6, "slaves": 1.5 },
{ "year": "1830", "total": 12.9, "slaves": 2 },
{ "year": "1840", "total": 17, "slaves": 2.5 },
{ "year": "1850", "total": 23.2, "slaves": 3.2 },
{ "year": "1860", "total": 31.4, "slaves": 4 },
]
});
//創建數據倉庫實例
var store = Ext.create("PandaApp.store.Population");
//創建容器存放圖表組件
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
items: [
{
xtype: 'chart',
legend: { docked: 'bottom' },
insetPadding: { top: 60, bottom: 20, left: 20, right: 40 },
store: store,
axes: [
{
type: 'numeric',
position: 'left',
grid: true,
title: { text: 'Population in Millions', fontSize: 16 },
minimum: 0,
},
{
type: 'category', //
title: { text: 'Year', fontSize: 16 },
position: 'bottom',
}
],
series: [
{
type: 'line',
xField: 'year',
title: ['Total'],
yField: ['total']
},
{
type: 'line',
xField: 'year',
title: ['Slaves'],
yField: ['slaves'],
},
],
sprites: [
{
type: 'text',
text: 'United States Slaves Distribution 1790 to 1860',
font: '20px Helvetica',
width: 120,
height: 35,
x: 60,
y: 40
},
{
type: 'text',
text: 'Source: http://www.wikipedia.org',
fontSize: 10,
x: 12,
y: 440
}
]
}
]
});
實例：繪制餅圖
實例：繪制餅圖
代碼：
//創建對應的數據存儲
Ext.define('PandaApp.store.Expense', {
extend: 'Ext.data.Store',
alias: 'store.expense',
fields: [ 'cat', 'spent'],
data: [
{ "cat": "Restaurant", "spent": 100},
{ "cat": "Travel", "spent": 150},
{ "cat": "Insurance", "spent": 500},
{ "cat": "Rent", "spent": 1000},
{ "cat": "Groceries", "spent": 400},
{ "cat": "Utilities", "spent": 300},
]
});
//實例化
var store = Ext.create("PandaApp.store.Expense");
//創建容器
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 500,
layout: 'fit',
items: [
{
xtype: 'polar',
legend: { docked: 'bottom' },
insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
store: store,
series: [
{
type: 'pie',
angleField: 'spent',
label: {
field: 'cat',
},
tooltip: {
trackMouse: true,
renderer: function (storeItem, item) {
var value = ((parseFloat(storeItem.get('spent') /
toreItem.store.sum('spent')) * 100.0).toFixed(2));
this.setHtml(storeItem.get('cat') + ': ' + value + '%');
}
}
}
]
}
]
});
實例：繪制餅圖2
代碼：
//創建測試使用的數據Store
var myChartStore = Ext.create('Ext.data.ArrayStore',{
storeId: 'salesStore',
fields:[
{name: 'id', type: 'int'},
{name: 'region', type: 'string'},
{name: 'sales', type: 'float'}
],
data:[
[10001 ,"North", 15.55],
[10002 ,"South", 23.99],
[10003 ,"East", 17.44],
[10004 ,"West", 30.00],
[10005 ,"Central", 4.1],
[10006 ,"OverSeas", 2.55]
]
});
//創建圖表
var mychart= Ext.create('Ext.chart.PolarChart', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
store: myChartStore, //配置關聯的Store
insetPadding: { //設置padding
top: 50,
left: 25,
right: 25,
bottom: 15
},
innerPadding: 20,
interactions: ['rotate', 'itemhighlight'],
theme: 'default-gradients',
legend: {docked: 'bottom'},
series: {
type: 'pie',
angleField:'sales', // xField
label: {
field:'region',
calloutLine: {
length: 60,
width: 3
}
},
highlight: true,
tooltip: {
trackMouse: true,
renderer: function(item, storeItem) {
item.setHtml(storeItem.get('region') + ': ' + storeItem.get('sales'));
}
}
},
sprites: {
type: 'text',
text: 'My Company - 2015',
fontSize: 22,
fillStyle: '#993366',
width: 100,
height: 30,
x: 40, // the sprite x position
y: 25 // the sprite y position
}
});
實例：繪制餅圖（3D）
代碼：
//創建對應的數據存儲
Ext.define('PandaApp.store.Expense', {
extend: 'Ext.data.Store',
alias: 'store.expense',
fields: [ 'cat', 'spent'],
data: [
{ "cat": "Restaurant", "spent": 100},
{ "cat": "Travel", "spent": 150},
{ "cat": "Insurance", "spent": 500},
{ "cat": "Rent", "spent": 1000},
{ "cat": "Groceries", "spent": 400},
{ "cat": "Utilities", "spent": 300},
]
});
//實例化
var store = Ext.create("PandaApp.store.Expense");
//創建容器
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 500,
layout: 'fit',
items: [
{
xtype: 'polar',
legend: { docked: 'bottom' },
insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
store: store,
series: [
{
type: 'pie3d',
thickness: 70,
distortion: 0.5,
angleField: 'spent',
label: {
field: 'cat',
},
tooltip: {
trackMouse: true,
renderer: function (storeItem, item) {
var value = ((parseFloat(storeItem.get('spent') /
toreItem.store.sum('spent')) * 100.0).toFixed(2));
this.setHtml(storeItem.get('cat') + ': ' + value + '%');
}
}
}
]
}
]
});
實例：繪制圈圖（donut chart）
實例：繪制圈圖
代碼：
//創建對應的數據存儲
Ext.define('PandaApp.store.Expense', {
extend: 'Ext.data.Store',
alias: 'store.expense',
fields: [ 'cat', 'spent'],
data: [
{ "cat": "Restaurant", "spent": 100},
{ "cat": "Travel", "spent": 150},
{ "cat": "Insurance", "spent": 500},
{ "cat": "Rent", "spent": 1000},
{ "cat": "Groceries", "spent": 400},
{ "cat": "Utilities", "spent": 300},
]
});
//實例化
var store = Ext.create("PandaApp.store.Expense");
//創建容器
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 500,
layout: 'fit',
items: [
{
xtype: 'polar',
legend: { docked: 'bottom' },
insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
store: store,
series: [
{
type: 'pie',
donut: 50, //在餅圖的基礎上，加上這個屬性
angleField: 'spent',
label: {
field: 'cat',
},
tooltip: {
trackMouse: true,
renderer: function (storeItem, item) {
var value = ((parseFloat(storeItem.get('spent') /
toreItem.store.sum('spent')) * 100.0).toFixed(2));
this.setHtml(storeItem.get('cat') + ': ' + value + '%');
}
}
}
]
}
]
});
實例：繪制圈圖（3D）
代碼：
//創建對應的數據存儲
Ext.define('PandaApp.store.Expense', {
extend: 'Ext.data.Store',
alias: 'store.expense',
fields: [ 'cat', 'spent'],
data: [
{ "cat": "Restaurant", "spent": 100},
{ "cat": "Travel", "spent": 150},
{ "cat": "Insurance", "spent": 500},
{ "cat": "Rent", "spent": 1000},
{ "cat": "Groceries", "spent": 400},
{ "cat": "Utilities", "spent": 300},
]
});
//實例化
var store = Ext.create("PandaApp.store.Expense");
//創建容器
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 500,
layout: 'fit',
items: [
{
xtype: 'polar',
legend: { docked: 'bottom' },
insetPadding: { top: 100, bottom: 20, left: 20, right: 40 },
store: store,
series: [
{
type: 'pie3d',
donut: 50,
thickness: 70,
distortion: 0.5,
angleField: 'spent',
label: {
field: 'cat',
},
tooltip: {
trackMouse: true,
renderer: function (storeItem, item) {
var value = ((parseFloat(storeItem.get('spent') /
toreItem.store.sum('spent')) * 100.0).toFixed(2));
this.setHtml(storeItem.get('cat') + ': ' + value + '%');
}
}
}
]
}
]
});
待合并
實例：繪制堆積圖（stacked chart）
餅圖（Pie Chart）（實例存在問題，需要修復）
Ext.create('Ext.chart.PolarChart', {
renderTo: document.body,
width: 600,
height: 300,
store: {
fields: ['name', 'g1'],
data: [
{"name": "Item-0", "g1": 57},
{"name": "Item-1", "g1": 45},
{"name": "Item-2", "g1": 67}
]
},
//configure the legend.
legend: {
docked: 'bottom'
},
//describe the actual pie series.
series: [{
type: 'pie',
xField: 'g1',
label: {
field: 'name'
},
donut: 30 //increase or decrease for increasing or decreasing donut area in middle.
}]
});
折線圖（Line Chart）（實例存在問題，需要修復）
Ext.create('Ext.chart.CartesianChart', {
renderTo: document.body,
width: 600,
height: 200,
store: {
fields: ['name', 'g1', 'g2'],
data: [
{"name": "Item-0", "g1": 57, "g2": 59},
{"name": "Item-1", "g1": 45, "g2": 50},
{"name": "Item-2", "g1": 67, "g2": 43},
{"name": "Item-3", "g1": 45, "g2": 18},
{"name": "Item-4", "g1": 30, "g2": 90}
]
},
legend: {
docked: 'bottom'
},
//define x and y axis.
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
visibleRange: [0, 1],
position: 'bottom'
}],
//define the actual series
series: [{
type: 'line',
xField: 'name',
yField: 'g1',
title: 'Normal'
}, {
type: 'line',
xField: 'name',
yField: 'g2',
title: 'Smooth'
}]
});
條形圖（Bar Chart）（實例存在問題，需要修復）
Ext.create('Ext.chart.CartesianChart', {
renderTo: document.body,
width: 600,
height: 200,
flipXY: true,
store: {
fields: ['name', 'g1', 'g2'],
data: [
{"name": "Item-0", "g1": 57, "g2": 59},
{"name": "Item-1", "g1": 45, "g2": 50},
{"name": "Item-2", "g1": 67, "g2": 43},
{"name": "Item-3", "g1": 45, "g2": 18},
{"name": "Item-4", "g1": 30, "g2": 90}
]
},
//set legend configuration
legend: {
docked: 'right'
},
//define the x and y-axis configuration.
axes: [{
type: 'numeric',
position: 'bottom',
grid: true,
minimum: 0
}, {
type: 'category',
position: 'left'
}],
//define the actual bar series.
series: [{
type: 'bar',
xField: 'name',
yField: ['g1', 'g2'],
axis: 'left'
}]
});
面積圖（Area Chart）（實例存在問題，需要修復）
Ext.create('Ext.chart.CartesianChart', {
renderTo: document.body,
width: 600,
height: 200,
store: {
fields: ['name', 'g1', 'g2'],
data: [
{"name": "Item-0", "g1": 57, "g2": 59},
{"name": "Item-1", "g1": 45, "g2": 50},
{"name": "Item-2", "g1": 67, "g2": 43},
{"name": "Item-3", "g1": 45, "g2": 18},
{"name": "Item-4", "g1": 30, "g2": 90}
]
},
legend: {
docked: 'right'
},
axes: [{
type: 'numeric',
position: 'left',
grid: true
}, {
type: 'category',
position: 'bottom',
visibleRange: [0,5]
}],
series: [{
type: 'area',
xField: 'name',
yField: ['g1', 'g2'],
title: ['G1', 'G2']
}]
});
