extjs圖表繪制之條形圖實現(xiàn)方法分析
本文實例講述了extjs圖表繪制之條形圖實現(xiàn)方法。分享給大家供大家參考，具體如下：
創(chuàng)新互聯(lián)公司是一家專業(yè)提供南城企業(yè)網(wǎng)站建設,專注與網(wǎng)站設計、成都網(wǎng)站制作、H5建站、小程序制作等業(yè)務。10年已為南城眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設公司優(yōu)惠進行中。
這篇文章將介紹extjs圖表中條形圖。
將實現(xiàn)以下的功能：
1.從后端請求數(shù)據(jù)并運用到圖表中，形成動態(tài)數(shù)據(jù)。
2.查詢出每年各個月中人數(shù)。
3.改變條形柱的顏色，改變默認的顏色換成自己想要的顏色。
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = '#3D96AE'
return barAttr;
},
先看完整的代碼：
Ext.define('ChartColumnTest', {
extend: 'Ext.panel.Panel',
autoScroll : true,
selectYear:null,
initComponent: function () {
var me = this;
me.store = me.createStore();
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,// 是否支持動態(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(),
series:me.createSeries(),
}
},
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;
me.store.load();
}}}
];
return tbar;
},
createStore: function () {
var me = this;
return Ext.create('Ext.data.JsonStore', {
//從后端請求數(shù)據(jù)
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
}
},
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: 'column',
axis: 'left',
title:'活躍用戶數(shù)',
highlight: true,
tips: {
trackMouse: true,
width: 200,
height: 28,
renderer: function(storeItem, item) {
this.setTitle( "人數(shù)："+storeItem.get('activeCount')+",占比："+storeItem.get('effectiveProportion') );
}
},
//設置條形柱的顏色
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = '#3D96AE'
return barAttr;
},
//設置顯示每個坐標上的文字
label: {
display: 'outside',
'text-anchor': 'middle',
field: 'activeCount',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',//改變數(shù)字方向 水平顯示
font: '25px Helvetica, sans-serif',
'text-anchor': 'start',
color: 'red',
},
xField: 'statTime',
yField: 'activeCount',
// yPadding:100, 距離x軸的高度
},
];
return columns;
}
});
下面講解上圖中的代碼：
1.在panel中定義圖表。條形圖主要data（數(shù)據(jù)）、軸（y、x軸）、系列（series）組成。
2.定義查詢的tbar,圖中的數(shù)據(jù)是根據(jù)年份所查詢出來的，用來動態(tài)顯示。
3.在y軸上標刻的是人數(shù)，定義最大值和最小值，會自動調節(jié)每個間距的大小，position 定義位置 有‘left'，‘right'，bottom，‘top'四種
type: 'Numeric',
position: 'left',
minimum: 1000,
maximum: 10000,
4.step 定義以多少為間隔，在此案例中，我以一個月為間隔。position 定義位置 有‘left'，‘right'，bottom，‘top'四種，grid:false 不是網(wǎng)格布局。
{
type: 'Time',
position: 'bottom',
fields: 'statTime',
step: [Ext.Date.MONTH, 1],
dateFormat: 'y-m',
title: '日期',
grid: false,
}
5.tips 當鼠標放在圖表上所顯示的文字。在renderer方法中設置自己想顯示的文字。
tips: {
trackMouse: true,
width: 200,
height: 28,
renderer: function(storeItem, item) {
this.setTitle( "人數(shù)："+storeItem.get('activeCount')+",占比："+storeItem.
get('effectiveProportion') );
}
},
6.可以在定義的系列中（series）中定義renderer方法，在此方法中改變條形柱的顏色。
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = '#3D96AE'
return barAttr;
},
7.可以在label中調節(jié)顯示文字的方向和文字顯示的位置。
label: {
display: 'outside',
'text-anchor': 'middle',
field: 'activeCount',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',//改變數(shù)字方向 水平顯示
font: '25px Helvetica, sans-serif',
'text-anchor': 'start',
color: 'red',
},
display 可以改變文字在圖表中的顯示位置?！甶nsideStart'，‘insideEnd'，‘outside'分別代表在條形柱的最開始，最后面和外面。大家可以自己去試試。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
當前名稱：extjs圖表繪制之條形圖實現(xiàn)方法分析
本文來源：http://muchs.cn/article34/pppose.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、企業(yè)建站、外貿(mào)網(wǎng)站建設、網(wǎng)站建設、網(wǎng)站維護、網(wǎng)頁設計公司
聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 公司網(wǎng)站制作的時候怎樣正確使用面包屑導航 2021-04-25
- 如何在面包屑導航中優(yōu)化搜索引擎優(yōu)化 2022-09-26
- 面包屑導航在網(wǎng)站優(yōu)化中的作用 2016-02-07
- 如何用面包屑導航做SEO優(yōu)化？ 2015-08-15
- 深入了解面包屑導航對用戶體驗和搜索引擎的作用 2015-02-13
- 面包屑導航對網(wǎng)站建設的好處 2022-05-27
- 什么是面包屑導航?面包屑導航的作用及注意事項 2023-04-02
- 淺談網(wǎng)站建設中的面包屑導航 2016-08-26
- 細節(jié)決定成敗：面包屑導航對seo優(yōu)化的重要性 2022-06-29
- 設置合理的面包屑導航，可提高蜘蛛抓取網(wǎng)站的頻率 2023-04-30
- 網(wǎng)站制作中的面包屑導航是什么？ 2023-01-01
- 網(wǎng)站面包屑導航使用四大注意事項 2022-08-23