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.從后端請求數(shù)據(jù)并運(yùn)用到圖表中，形成動(dòng)態(tài)數(shù)據(jù)。
2.查詢出每年各個(gè)月中人數(shù)。
請看下面代碼：
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 () {
//從后端請求數(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',//字體 顏色
//對坐標(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ù) - 是圖表用來展示的信息，在Ext 中使用標(biāo)準(zhǔn)的Model 或是 Store.
軸 - 提供數(shù)據(jù)的來源，范圍，規(guī)模和單位。組成圖表的基本架構(gòu)。 軸可以是笛卡爾坐標(biāo)(x,y), 極性(或徑向)，或軌距(用于儀表盤圖表的一維軸)。盡管一個(gè)結(jié)合多個(gè)類型系列的圖表需要額外的軸定義，但大多數(shù)的圖表還是使用一組軸。
系列- 這個(gè)屬于是用于數(shù)據(jù)的圖形渲染的。換句話說，就是一個(gè)圖標(biāo)的基本圖形項(xiàng)目，像 線圖，柱狀圖，欄位或餅圖。一個(gè)圖形可以包含多個(gè)系列。 例如： 在一個(gè)圖形的中有三個(gè)線狀圖就包含有三個(gè)獨(dú)立的線系列。
可以添加標(biāo)簽，標(biāo)記和圖例說明到圖上；還可以設(shè)置動(dòng)畫效果或是放大某一個(gè)區(qū)塊。
label(標(biāo)簽) -- 對一個(gè)軸或是系統(tǒng)的解釋性標(biāo)題。
marker(標(biāo)記) -- 用來在一個(gè)系列中繪制數(shù)據(jù)點(diǎn)的一個(gè)符號，形狀或是圖片。
legend(說明) -- 提供圖的說明，解釋各變量在圖形中代表的意義。(圖例)
listeners(監(jiān)聽器)--等待某個(gè)事件并作出一些動(dòng)作像鼠標(biāo)事件等
animation( 動(dòng)畫)-- 圖的元素可以移動(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)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- extjs圖表繪制之條形圖實(shí)現(xiàn)方法分析
- Extjs grid添加一個(gè)圖片狀態(tài)或者按鈕的方法
- ExtJS[Desktop]實(shí)現(xiàn)圖標(biāo)換行示例代碼
- 解決Extjs上傳圖片無法預(yù)覽的解決方法
- ExtJs之帶圖片的下拉列表框插件
- ExtJs使用總結(jié)(非常詳細(xì))
- 學(xué)習(xí)ExtJS Window常用方法
- Extjs學(xué)習(xí)筆記之五 一個(gè)小細(xì)節(jié)renderTo和applyTo的區(qū)別
- Extjs中常用表單介紹與應(yīng)用
- ExtJS 簡介 讓你知道extjs是什么
- ExtJS下grid的一些屬性說明
- extjs圖形繪制之餅圖實(shí)現(xiàn)方法分析
相關(guān)文章
js定時(shí)器+簡單的動(dòng)畫效果實(shí)例
下面小編就為大家?guī)硪黄猨s定時(shí)器+簡單的動(dòng)畫效果實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
JavaScript 不只是腳本...2007-05-05
javascript實(shí)現(xiàn)移動(dòng)端輪播圖
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
js修改input的type屬性有些限制,今天遇到個(gè)問題一開始的時(shí)候，input的類型是text，后來變成了password類型。直觀的思路是用js修改input的type類型。但ie下這么做不可行，所以只能換個(gè)思路感興趣的朋友可以了解下2013-01-01
JS+CSS實(shí)現(xiàn)Li列表隔行換色效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)Li列表隔行換色效果的方法,實(shí)例分析了js操作li節(jié)點(diǎn)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab頁面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
showModalDialog在谷歌瀏覽器下會(huì)返回Null的解決方法
showModalDialog的返回值在IE、火狐下面都能夠獲取返回值，但是在谷歌瀏覽器下面會(huì)返回Null，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了JS簡單生成由字母數(shù)字組合隨機(jī)字符串,結(jié)合實(shí)例形式分析了javascript使用Math.random()生成隨機(jī)字符串相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法,可實(shí)現(xiàn)文本框輸入加減運(yùn)算式同時(shí)右側(cè)實(shí)時(shí)顯示對應(yīng)計(jì)算結(jié)果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
js 字符串轉(zhuǎn)化成數(shù)字的代碼，需要的朋友可以參考下。2011-06-06