本文例項講述了extjs4圖表繪製之折線圖實現方法。分享給大家供大家參考，具體如下：

本篇文章將介紹extjs中自帶的圖表

在本次案例中，提供一下功能：

1.從後端請求資料並運用到圖表中，形成動態資料。

2.查詢出每年各個月中人數。

請看下面程式碼：

Ext.define('ChartLineTest',{
  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,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,// 是否支援動態資料變化
        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');//這是為了取現在的年份數
            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 () {
    //從後端請求資料
    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: '人數',grid: true,},{
        type: 'Numeric',position: 'right',minimum: 1000,{
        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 在座標系中將不顯示標記
        axis: 'left',xField: 'statTime',renderer: Ext.util.Format.dateRenderer('Y-m '),yField: 'activeCount',title :'活躍使用者',//定義浮標（提示框） 顯示想要顯示的文字
        tips: {
          trackMouse: true,width: 200,height: 40,renderer: function(storeItem,item) {
            this.setTitle( "人數："+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',// selectionTolerance:0,axis: 'left',title :'有效使用者',yField: 'effectiveCount',markerConfig: {
          type: 'circle','stroke-width': 0
        },/* style: {
          color: '#6666CC'
        },*/
        style: {
          stroke: '#00ff00',/* 'stroke-width': 10,fill: '#80A080',opacity: 0.2*/
        },/*   label: {
          display: 'middle',field: 'effectiveCount',font: '15px Helvetica,color: 'red',minMargin:100,*/
        //定義座標上的文字的屬性
        label: {
          display: 'over',//數值顯示的方式 ‘horizontal'水平顯示
          font: '15px Helvetica,'text-anchor': 'start',//字型 顏色
          //對座標上的文字進行操作，當數值大於5000的時候顯示另一種顏色
          renderer: function(value,label,storeItem,item,i,display,animate,index) {

            if (value >= 5000) {
              label.setAttributes({fill:'#080',});
              value = value;
            }
            return value;
          }
        }
      },];
    return columns;
  }

});

每一個圖表必須要三個組成部分： 資料(data),軸(axes)和系列(Series)。

資料- 是圖表用來展示的資訊，在Ext 中使用標準的Model 或是 Store.

軸- 提供資料的來源，範圍，規模和單位。組成圖表的基本架構。 軸可以是笛卡爾座標(x,y),極性(或徑向)，或軌距(用於儀表盤圖表的一維軸)。儘管一個結合多個型別系列的圖表需要額外的軸定義，但大多數的圖表還是使用一組軸。

系列-這個屬於是用於資料的圖形渲染的。換句話說，就是一個圖示的基本圖形專案，像 線圖，柱狀圖，欄位或餅圖。一個圖形可以包含多個系列。 例如： 在一個圖形的中有三個線狀圖就包含有三個獨立的線系列。

可以新增標籤，標記和圖例說明到圖上；還可以設定動畫效果或是放大某一個區塊。

label(標籤) --對一個軸或是系統的解釋性標題。

marker(標記)-- 用來在一個系列中繪製資料點的一個符號，形狀或是圖片。

legend(說明)-- 提供圖的說明，解釋各變數在圖形中代表的意義。(圖例)

listeners(監聽器)--等待某個事件並作出一些動作像滑鼠事件等

animation( 動畫)-- 圖的元素可以移動

tips（提示框）-- 當滑鼠放在座標軸上顯示的提示文字。

markerConfig--定義每一點座標的形狀。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧彙總》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。