關於extjs3.2columnchart的信息

本文目錄一覽：

1、extjs xtype有哪些樣式
2、extjs里如何調整columns里的列寬
3、EXTJS3.0如何畫柱狀圖
4、怎麼用ExtJs 的chart做出這樣的獎金池變化圖：
5、Extjs中做Chart柱狀圖統計時怎麼限制柱子的最大寬度？
6、Extjs GridPanel構造器參數意思

extjs xtype有哪些樣式

基本組件：

xtype Class 描述

button Ext.Button 按鈕

splitbutton Ext.SplitButton 帶下拉菜單的按鈕

cycle Ext.CycleButton 帶下拉選項菜單的按鈕

buttongroup Ext.ButtonGroup 編組按鈕(Since 3.0)

slider Ext.Slider 滑動條

progress Ext.ProgressBar 進度條

statusbar Ext.StatusBar 狀態條，2.2加進來，3.0 又去了

colorpalette Ext.ColorPalette 調色板

datepicker Ext.DatePicker 日期選擇面板

容器及數據類組件

xtype Class 描述

window Ext.Window 窗口

viewport Ext.ViewPort 視口，即瀏覽器的視口，能隨之伸縮

box Ext.BoxComponent 盒子組件，相當於一個 div

component Ext.Component 組件

container Ext.Container 容器

panel Ext.Panel 面板

tabpanel Ext.TabPanel 選項面板

treepanel Ext.tree.TreePanel 樹型面板

flash Ext.FlashComponent 顯示 Flash 的組件(Since 3.0)

grid Ext.grid.GridPanel 表格

editorgrid Ext.grid.EditorGridPanel 可編輯的表格

propertygrid Ext.grid.PropertyGrid 屬性表格

editor Ext.Editor 編輯器

dataview Ext.DataView 數據顯示視圖

listview Ext.ListView 列表視圖

工具欄組件：

xtype Class 描述

paging Ext.PagingToolbar 分頁工具條

toolbar Ext.Toolbar 工具欄

tbbutton Ext.Toolbar.Button 工具欄按鈕

tbfill Ext.Toolbar.Fill 工具欄填充區

tbitem Ext.Toolbar.Item 工具條項目

tbseparator Ext.Toolbar.Separator 工具欄分隔符

tbspacer Ext.Toolbar.Spacer 工具欄空白

tbsplit Ext.Toolbar.SplitButton 工具欄分隔按鈕

tbtext Ext.Toolbar.TextItem 工具欄文本項

菜單組件：

xtype Class 描述

menu Ext.menu.Menu 菜單

colormenu Ext.menu.ColorMenu 顏色選擇菜單

datemenu Ext.menu.DateMenu 日期選擇菜單

menubaseitem BaseItem

menucheckitem Ext.menu.CheckItem 選項菜單項

menuitem Ext.menu.Item

menuseparator Ext.menu.Separator 菜單分隔線

menutextitem Ext.menu.TextItem 文本菜單項

表單及表單域組件：

xtype Class 描述

form Ext.FormPanel/Ext.form.FormPanel 表單面板

checkbox Ext.form.Checkbox 多選框

combo Ext.form.ComboBox 下拉框

datefield Ext.form.DateField 日期選擇項

timefield Ext.form.TimeField 時間錄入項

field Ext.form.Field 表單字段

fieldset Ext.form.FieldSet 表單字段組

hidden Ext.form.Hidden 表單隱藏域

htmleditor Ext.form.HtmlEditor HTML 編輯器

label Ext.form.Label 標籤

numberfield Ext.form.NumberField 數字編輯器

radio Ext.form.Radio 單選按鈕

textarea Ext.form.TextArea 多行文本框

textfield Ext.form.TextField 表單文本框

trigger Ext.form.TriggerField 觸發錄入項

checkboxgroup Ext.form.CheckboxGroup 編組的多選框(Since 2.2)

displayfield Ext.form.DisplayField 僅顯示，不校驗/不被提交的文本框

radiogroup Ext.form.RadioGroup 編組的單選按鈕(Since 2.2)

圖表組件：

xtype Class 描述

chart Ext.chart.Chart 圖表組件

barchart Ext.chart.BarChart 柱狀圖

cartsianchart Ext.chart.CartesianChart

columnchart Ext.chart.ColumnChart

linechart Ext.chart.LineChart 連線圖

piechart Ext.chart.PieChart 扇形圖

數據集 Store：

xtype Class 描述

arraystore Ext.data.ArrayStore

directstore Ext.data.DirectStore

groupingstore Ext.data.GroupingStore

jsonstore Ext.data.JsonStore

simplestore Ext.data.SimpleStore

store Ext.data.Store

xmlstore Ext.data.XmlStore

以上參考；

請採納，謝謝

extjs里如何調整columns里的列寬

其實不要想得太複雜，可以直接給column設置width屬性來改變寬度。

如果要設置自適應列寬的話可以參考以下：

var grid = new Ext.grid.GridPanel({

title : ‘表格列自動分配寬度’,

columns : [

{header : ‘id’,dataIndex:’id’,width: 200},

{header :’name’,dataIndex:’name’}

store : 數據源

});

EXTJS3.0如何畫柱狀圖

用ext3.0實現的，我測試的整個文件如下

!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″

titleInsert title here/title

link rel=”stylesheet” type=”text/css”

href=”../extjs/resources/css/ext-all.css” /

script type=”text/javascript” src=”../extjs/adapter/ext/ext-base.js”/script

script type=”text/javascript” src=”../extjs/ext-all.js”/script

//以上的3個文件的引用很重要，要和你自己的相關路徑對應。

script type=”text/javascript”

Ext.chart.Chart.CHART_URL = ‘../extjs/resources/charts.swf ‘;//這個是要引用的圖形

Ext.onReady (function(){

var store = new Ext.data.JsonStore({

fields:[‘name’, ‘visits’, ‘views’],

data: [

{name:’Jul 07′, visits: 245000, views: 3000000},

{name:’Aug 07′, visits: 240000, views: 3500000},

{name:’Sep 07′, visits: 355000, views: 4000000},

{name:’Oct 07′, visits: 375000, views: 4200000},

{name:’Nov 07′, visits: 490000, views: 4500000},

{name:’Dec 07′, visits: 495000, views: 5800000},

{name:’Jan 08′, visits: 520000, views: 6000000},

{name:’Feb 08′, visits: 620000, views: 7500000}

]

});

var panel = new Ext.Panel({

title: ‘ExtJS.com Visits Trend, 2007/2008 (No styling)’,

renderTo: ‘container’,

width:500,

height:300,

layout:’fit’,

items: {

xtype: ‘linechart’,

store: store,

xField: ‘name’,

yField: ‘visits’,

listeners: {

itemclick: function(o){

var rec = store.getAt(o.index);

Ext.example.msg(‘Item Selected’, ‘You chose {0}.’, rec.get(‘name’));

}

});

new Ext.Panel({

iconCls:’chart’,

title: ‘ExtJS.com Visits Trend, 2007/2008 (Simple styling)’,

frame:true,

renderTo: ‘container’,

width:500,

height:300,

layout:’fit’,

items: {

xtype: ‘linechart’,

store: store,

url: ‘../extjs/resources/charts.swf’,

xField: ‘name’,

yField: ‘visits’,

yAxis: new Ext.chart.NumericAxis({

displayName: ‘Visits’,

labelRenderer : Ext.util.Format.numberRenderer(‘0,0’)

}),

tipRenderer : function(chart, record){

return Ext.util.Format.number(record.data.visits, ‘0,0’) + ‘ visits in ‘ + record.data.name;

}

});

// more complex with a custom look

new Ext.Panel({

iconCls:’chart’,

title: ‘ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)’,

frame:true,

renderTo: ‘container’,

width:500,

height:300,

layout:’fit’,

items: {

xtype: ‘columnchart’,

store: store,

url:’../extjs/resources/charts.swf’,

xField: ‘name’,

yAxis: new Ext.chart.NumericAxis({

displayName: ‘Visits’,

labelRenderer : Ext.util.Format.numberRenderer(‘0,0’)

}),

tipRenderer : function(chart, record, index, series){

if(series.yField == ‘visits’){

return Ext.util.Format.number(record.data.visits, ‘0,0’) + ‘ visits in ‘ + record.data.name;

}else{

return Ext.util.Format.number(record.data.views, ‘0,0’) + ‘ page views in ‘ + record.data.name;

}

chartStyle: {

padding: 10,

animationEnabled: true,

font: {

name: ‘Tahoma’,

color: 0x444444,

size: 11

dataTip: {

padding: 5,

border: {

color: 0x99bbe8,

size:1

background: {

color: 0xDAE7F6,

alpha: .9

font: {

name: ‘Tahoma’,

color: 0x15428B,

size: 10,

bold: true

}

xAxis: {

color: 0x69aBc8,

majorTicks: {color: 0x69aBc8, length: 4},

minorTicks: {color: 0x69aBc8, length: 2},

majorGridLines: {size: 1, color: 0xeeeeee}

yAxis: {

color: 0x69aBc8,

majorTicks: {color: 0x69aBc8, length: 4},

minorTicks: {color: 0x69aBc8, length: 2},

majorGridLines: {size: 1, color: 0xdfe8f6}

}

series: [{

type: ‘column’,

displayName: ‘Page Views’,

yField: ‘views’,

style: {

image:’bar.gif’,

mode: ‘stretch’,

color:0x99BBE8

}

},{

type:’line’,

displayName: ‘Visits’,

yField: ‘visits’,

style: {

color: 0x15428B

}

}]

}

});

// panel.render(‘container’);

});

/script

/head

body

div id=”container”

/div

/body

/html

怎麼用ExtJs 的chart做出這樣的獎金池變化圖：

這是標準的堆疊圖

給你來個例子研究一下

Ext.define(‘ChartsKitchenSink.view.charts.column.Stacked’, {

extend: ‘Ext.Panel’,

xtype: ‘stacked-column’,

initComponent: function() {

var me = this;

this.myDataStore = Ext.create(‘Ext.data.JsonStore’, {

fields: [‘month’, ‘data1’, ‘data2’, ‘data3’, ‘data4’ ],

data: [

{ month: ‘Jan’, data1: 20, data2: 37, data3: 35, data4: 4 },

{ month: ‘Feb’, data1: 20, data2: 37, data3: 36, data4: 5 },

{ month: ‘Mar’, data1: 19, data2: 36, data3: 37, data4: 4 },

{ month: ‘Apr’, data1: 18, data2: 36, data3: 38, data4: 5 },

{ month: ‘May’, data1: 18, data2: 35, data3: 39, data4: 4 },

{ month: ‘Jun’, data1: 17, data2: 34, data3: 42, data4: 4 },

{ month: ‘Jul’, data1: 16, data2: 34, data3: 43, data4: 4 },

{ month: ‘Aug’, data1: 16, data2: 33, data3: 44, data4: 4 },

{ month: ‘Sep’, data1: 16, data2: 32, data3: 44, data4: 4 },

{ month: ‘Oct’, data1: 16, data2: 32, data3: 45, data4: 4 },

{ month: ‘Nov’, data1: 15, data2: 31, data3: 46, data4: 4 },

{ month: ‘Dec’, data1: 15, data2: 31, data3: 47, data4: 4 }

]

});

me.items = [{

xtype: ‘chart’,

width: ‘100%’,

height: 410,

padding: ’10 0 0 0′,

animate: true,

shadow: false,

style: ‘background: #fff;’,

legend: {

position: ‘bottom’,

boxStrokeWidth: 0,

labelFont: ’12px Helvetica’

store: this.myDataStore,

insetPadding: 40,

items: [{

type : ‘text’,

text : ‘Column Charts – Stacked Columns’,

font : ’22px Helvetica’,

width : 100,

height: 30,

x : 40, //the sprite x position

y : 12 //the sprite y position

}, {

type: ‘text’,

text: ‘Data: Browser Stats 2012’,

font: ’10px Helvetica’,

x: 12,

y: 380

}, {

type: ‘text’,

text: ‘Source: ‘,

font: ’10px Helvetica’,

x: 12,

y: 390

}],

axes: [{

type: ‘Numeric’,

position: ‘left’,

grid: true,

fields: [‘data1’],

label: {

renderer: function(v) { return v + ‘%’; }

minimum: 0

}, {

type: ‘Category’,

position: ‘bottom’,

grid: true,

fields: [‘month’],

label: {

rotate: {

degrees: -45

}

}],

series: [{

type: ‘column’,

axis: ‘left’,

title: [ ‘IE’, ‘Firefox’, ‘Chrome’, ‘Safari’ ],

xField: ‘month’,

yField: [ ‘data1’, ‘data2’, ‘data3’, ‘data4’ ],

stacked: true,

style: {

opacity: 0.80

highlight: {

fill: ‘#000’,

‘stroke-width’: 1,

stroke: ‘#fff’

tips: {

trackMouse: true,

style: ‘background: #FFF’,

height: 20,

renderer: function(storeItem, item) {

var browser = item.series.title[Ext.Array.indexOf(item.series.yField, item.yField)];

this.setTitle(browser + ‘ for ‘ + storeItem.get(‘month’) + ‘: ‘ + storeItem.get(item.yField) + ‘%’);

}

}]

}];

this.callParent();

}

});

Code Preview