extjs4圖表繪制之折線圖實(shí)現(xiàn)方法分析
更新時(shí)間：2020年03月06日 08:50:25 作者：程序媛-jjl
這篇文章主要介紹了extjs4圖表繪制之折線圖實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了extjs4繪制折線圖的相關(guān)操作技巧、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了extjs4圖表繪制之折線圖實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
本篇文章將介紹extjs中自帶的圖表
在本次案例中，提供一下功能：
1.從后端請(qǐng)求數(shù)據(jù)并運(yùn)用到圖表中，形成動(dòng)態(tài)數(shù)據(jù)。
2.查詢出每年各個(gè)月中人數(shù)。
請(qǐng)看下面代碼：
Ext.define('ChartLineTest', {
extend: 'Ext.panel.Panel',
autoScroll : true,
selectYear:null,//定義年份
initComponent: function () {//定義初始化組件
var me = this;
me.store = me.createStore();//定義數(shù)據(jù)
me.grid = me.getGridPanel();
me.mainPanel = Ext.create('Ext.panel.Panel',{
layout:'fit',
items:[me.grid],
tbar:me.createQueryTbar(),//定義查詢的組件
});
Ext.apply(me,{
layout:'fit',
items:[me.mainPanel]
});
me.callParent();
me.mainPanel.down('chart').on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
me.onCellClick(cellIndex, record);
});
},
getGridPanel:function(){
var me = this;
return {
xtype:'chart',
animate : true,// 是否支持動(dòng)態(tài)數(shù)據(jù)變化
legend: {// 圖例
display: "bottom",
spacing: 2,
padding: 5,
font: {
name: 'Tahoma',
color: '#3366FF',
size: 12,
bold: true
}
},
store:me.store,
axes:me.createAxes(),//定義橫豎軸數(shù)據(jù)
series:me.createSeries(),//定義圖表中的數(shù)據(jù)
}
},
createQueryTbar: function(){
var me=this;
var tbar=[
{
xtype : 'combo',
fieldLabel:'選擇年份',
name:'selectYear',
queryMode : 'local',
editable : true,
readOnly:false,
labelWidth: 60,
width:200,
store : new Ext.data.ArrayStore({
fields : ['id','name'],
data : []
}),
valueField : 'name',
displayField : 'id',
triggerAction : 'all',
autoSelect : true,
listeners : {
beforerender : function(){
var newyear = Ext.Date.format(new Date(),'Y');//這是為了取現(xiàn)在的年份數(shù)
var yearlist = [];
for(var i = newyear;i>=2015;i--){
yearlist.push([i,i]);
}
this.store.loadData(yearlist);
}
}
},
{xtype: 'button',text : '查找',
listeners : {
"click" : function() {
var value = Ext.ComponentQuery.query('[name=selectYear]')["0"].value;
me.selectYear = value;//賦值給selectYear屬性
me.store.load();
}}}
];
return tbar;
},
createStore: function () {
//從后端請(qǐng)求數(shù)據(jù)
var me = this;
return Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'id', mapping: 'id'},
{name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'},
'activeCount', 'effectiveCount','effectiveProportion',
],
proxy: {
type: 'ajax',
url: ctx+'/mvc/com/analyze/tblVwMonthUserStat',
reader: {
type: 'json',
root: 'root',
totalProperty: 'totalProperty'
}
},
listeners: {
'beforeload': function (store, operation, eOpts) {
store.proxy.extraParams.selectYear = me.selectYear//賦值給selectYear屬性
}
},
autoLoad: true
});
},
createAxes: function () {
var me = this;
var columns = [
{
type: 'Numeric',
position: 'left',//定義位置
minimum: 1000,
maximum: 10000,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: '人數(shù)',
grid: true,
},
{
type: 'Numeric',
position: 'right',
minimum: 1000,
maximum: 10000,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: '人數(shù)',
grid: true,
},
{
type: 'Time',
position: 'bottom',
fields: 'statTime',
step: [Ext.Date.MONTH, 1],///定義間隔
dateFormat: 'y-m',
title: '日期',
grid: false,
}
];
return columns;
},
createSeries: function () {
var me = this;
var columns = [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
fill: false,
// showInLegend:false,//要是為false 在坐標(biāo)系中將不顯示標(biāo)記
axis: 'left',
xField: 'statTime',
renderer: Ext.util.Format.dateRenderer('Y-m '),
yField: 'activeCount',
title :'活躍用戶',
//定義浮標(biāo)（提示框） 顯示想要顯示的文字
tips: {
trackMouse: true,
width: 200,
height: 40,
renderer: function(storeItem, item) {
this.setTitle( "人數(shù)："+storeItem.get('activeCount')+",占比："+storeItem.get('effectiveProportion') );
}
},
label: {
display: 'insideEnd',
field: 'activeCount',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
font:'15px Helvetica, sans-serif',
'text-anchor': 'end',
color:'red',
},
markerConfig: {
type: 'cross',
size: 3,
radius: 3,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
// selectionTolerance:0,
axis: 'left',
title :'有效用戶',
fill: false,
xField: 'statTime',
renderer: Ext.util.Format.dateRenderer('Y-m '),
yField: 'effectiveCount',
markerConfig: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 0
},
/* style: {
color: '#6666CC'
},*/
style: {
stroke: '#00ff00',
/* 'stroke-width': 10,
fill: '#80A080',
opacity: 0.2*/
},
/* label: {
display: 'middle',
field: 'effectiveCount',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
font: '15px Helvetica, sans-serif',
'text-anchor': 'end',
color: 'red',
minMargin:100,
},*/
//定義坐標(biāo)上的文字的屬性
label: {
display: 'over',
field: 'effectiveCount',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',//數(shù)值顯示的方式 ‘horizontal'水平顯示
font: '15px Helvetica, sans-serif',
'text-anchor': 'start',
color: 'red',//字體 顏色
//對(duì)坐標(biāo)上的文字進(jìn)行操作，當(dāng)數(shù)值大于5000的時(shí)候顯示另一種顏色
renderer: function(value, label, storeItem, item, i, display, animate, index) {
if (value >= 5000) {
label.setAttributes({fill:'#080',});
value = value;
}
return value;
}
}
},
];
return columns;
}
});
每一個(gè)圖表必須要三個(gè)組成部分： 數(shù)據(jù)(data), 軸(axes)和系列(Series)。
數(shù)據(jù) - 是圖表用來(lái)展示的信息，在Ext 中使用標(biāo)準(zhǔn)的Model 或是 Store.
軸 - 提供數(shù)據(jù)的來(lái)源，范圍，規(guī)模和單位。組成圖表的基本架構(gòu)。 軸可以是笛卡爾坐標(biāo)(x,y), 極性(或徑向)，或軌距(用于儀表盤(pán)圖表的一維軸)。盡管一個(gè)結(jié)合多個(gè)類(lèi)型系列的圖表需要額外的軸定義，但大多數(shù)的圖表還是使用一組軸。
系列- 這個(gè)屬于是用于數(shù)據(jù)的圖形渲染的。換句話說(shuō)，就是一個(gè)圖標(biāo)的基本圖形項(xiàng)目，像 線圖，柱狀圖，欄位或餅圖。一個(gè)圖形可以包含多個(gè)系列。 例如： 在一個(gè)圖形的中有三個(gè)線狀圖就包含有三個(gè)獨(dú)立的線系列。
可以添加標(biāo)簽，標(biāo)記和圖例說(shuō)明到圖上；還可以設(shè)置動(dòng)畫(huà)效果或是放大某一個(gè)區(qū)塊。
label(標(biāo)簽) -- 對(duì)一個(gè)軸或是系統(tǒng)的解釋性標(biāo)題。
marker(標(biāo)記) -- 用來(lái)在一個(gè)系列中繪制數(shù)據(jù)點(diǎn)的一個(gè)符號(hào)，形狀或是圖片。
legend(說(shuō)明) -- 提供圖的說(shuō)明，解釋各變量在圖形中代表的意義。(圖例)
listeners(監(jiān)聽(tīng)器)--等待某個(gè)事件并作出一些動(dòng)作像鼠標(biāo)事件等
animation( 動(dòng)畫(huà))-- 圖的元素可以移動(dòng)
tips（提示框）-- 當(dāng)鼠標(biāo)放在坐標(biāo)軸上顯示的提示文字。
markerConfig--定義每一點(diǎn)坐標(biāo)的形狀。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- extjs圖表繪制之條形圖實(shí)現(xiàn)方法分析
- Extjs grid添加一個(gè)圖片狀態(tài)或者按鈕的方法
- ExtJS[Desktop]實(shí)現(xiàn)圖標(biāo)換行示例代碼
- 解決Extjs上傳圖片無(wú)法預(yù)覽的解決方法
- ExtJs之帶圖片的下拉列表框插件
- ExtJs使用總結(jié)(非常詳細(xì))
- 學(xué)習(xí)ExtJS Window常用方法
- Extjs學(xué)習(xí)筆記之五 一個(gè)小細(xì)節(jié)renderTo和applyTo的區(qū)別
- Extjs中常用表單介紹與應(yīng)用
- ExtJS 簡(jiǎn)介 讓你知道extjs是什么
- ExtJS下grid的一些屬性說(shuō)明
- extjs圖形繪制之餅圖實(shí)現(xiàn)方法分析
相關(guān)文章
本文主要講解了JavaScript閉包和回調(diào),閉包的概念和特性,結(jié)合實(shí)例分析了使用步驟與方法2017-08-08
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)懸浮按鈕組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新（附源碼）
本文主要介紹了jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新的具體實(shí)例，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
js簡(jiǎn)單判斷移動(dòng)端系統(tǒng)的方法
這篇文章主要介紹了js簡(jiǎn)單判斷移動(dòng)端系統(tǒng)的方法,通過(guò)JavaScript的navigator.userAgent相關(guān)屬性判斷訪問(wèn)端的系統(tǒng)類(lèi)型,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-02-02
寫(xiě)作本文旨在加深自己印象，也為了更多人的了解到JS編碼風(fēng)格，提高自己的編碼質(zhì)量。想了解更多的內(nèi)容請(qǐng)閱讀《編寫(xiě)可維護(hù)的JavaScript》2016-08-08
這篇文章介紹了JavaScript屬性的操作，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了微信小程序引用iconfont圖標(biāo)的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
下面小編就為大家?guī)?lái)一篇數(shù)組Array的一些方法(總結(jié))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
下面小編就為大家?guī)?lái)一篇js中l(wèi)ess常用的方法小結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈窗猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11