javascript - 如何在 ExtJ 中深入分析图表

Question

这是我的示例应用程序，其中我有一个条形图、一个雷达图和四个饼图。我必须深入了解条形图。我之前开发过一个应用程序，其中我没有使用 MVC，但我能够深入了解 -但现在我使用的是 EXTJS MVC，我不明白应该在哪里放置向下钻取代码。这是我以前没有 MVC 的 barChart ..

window.weekWiseData = function(n, floor){
 var data = [],i;
  var weeks = ['Week1','Week2','Week3','Week4'];
  floor = (!floor && floor !== 0)? 20 : floor;
for (i = 0; i < (n || 4); i++) {
   data.push({
       name: weeks[i],
       data1: Math.floor(Math.max((Math.random() * 100), floor)),
       data2: Math.floor(Math.max((Math.random() * 100), floor)),
       data3: Math.floor(Math.max((Math.random() * 100), floor)),
       data4: Math.floor(Math.max((Math.random() * 100), floor)),
       data5: Math.floor(Math.max((Math.random() * 100), floor)),
       data6: Math.floor(Math.max((Math.random() * 100), floor)),
       data7: Math.floor(Math.max((Math.random() * 100), floor)),
       data8: Math.floor(Math.max((Math.random() * 100), floor)),
       data9: Math.floor(Math.max((Math.random() * 100), floor))
    });
 }
   return data;
};

var barWeekData;


window.dayWiseData = function(n, floor){
  var data = [],i;
  floor = (!floor && floor !== 0)? 20 : floor;
  for (i = 0; i < (n || 12); i++) {
   data.push({
       name: Ext.Date.dayNames[i % 7],
       data1: Math.floor(Math.max((Math.random() * 100), floor)),
       data2: Math.floor(Math.max((Math.random() * 100), floor)),
       data3: Math.floor(Math.max((Math.random() * 100), floor)),
       data4: Math.floor(Math.max((Math.random() * 100), floor)),
       data5: Math.floor(Math.max((Math.random() * 100), floor)),
       data6: Math.floor(Math.max((Math.random() * 100), floor)),
       data7: Math.floor(Math.max((Math.random() * 100), floor)),
       data8: Math.floor(Math.max((Math.random() * 100), floor)),
       data9: Math.floor(Math.max((Math.random() * 100), floor))
    });
  }
  return data;
};

var barDayData;


window.generateData = function(n, floor) {
var data = [], i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
    name : Ext.Date.monthNames[i % 12],
    data1 : Math.floor(Math.max((Math.random() * 100), floor)),
    data2 : Math.floor(Math.max((Math.random() * 100), floor)),
    data3 : Math.floor(Math.max((Math.random() * 100), floor)),
    data4 : Math.floor(Math.max((Math.random() * 100), floor)),
    data5 : Math.floor(Math.max((Math.random() * 100), floor)),
    data6 : Math.floor(Math.max((Math.random() * 100), floor)),
    data7 : Math.floor(Math.max((Math.random() * 100), floor)),
    data8 : Math.floor(Math.max((Math.random() * 100), floor)),
    data9 : Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};


var barMonData = generateData(5, 0);

window.st = Ext.create('Ext.data.JsonStore', {
fields : [ 'name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6',
    'data7', 'data9', 'data9' ],
data : barMonData
 });


var baseColor = 'rgb(0,0,0)';

var colors = ['url(#v-1)',
      'url(#v-2)',
      'url(#v-3)',
      'url(#v-4)',
      'url(#v-5)'];


Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',

constructor: function(config) {
this.callParent([Ext.apply({
    axis: {
        fill: baseColor,
        stroke: baseColor
    },
    axisLabelLeft: {
        fill: baseColor
    },
    axisLabelBottom: {
        fill: baseColor
    },
    axisTitleLeft: {
        fill: baseColor
    },
    axisTitleBottom: {
        fill: baseColor
    },
    colors: colors
}, config)]);
 }
});


var bar = Ext.define('BarColumn', {
extend : 'Ext.chart.Chart',
alias : 'widget.BarColumn',
xtype : 'chart',
theme : 'Fancy',
animate : {
easing : 'bounceOut',
duration : 750
   },
   store : st,
background : {
     fill : 'none'
},


 gradients : [ {
'id' : 'v-1',
'angle' : 0,
stops : {
    0 : {
        color : 'rgb(212, 40, 40)'
    },
    100 : {
        color : 'rgb(117, 14, 14)'
    }
}
}, 

 {
'id' : 'v-2',
'angle' : 0,
stops : {
    0 : {
        color : 'rgb(180, 216, 42)'
    },
    100 : {
        color : 'rgb(94, 114, 13)'
    }
}
}, {
'id' : 'v-3',
'angle' : 0,
stops : {
    0 : {
        color : 'rgb(43, 221, 115)'
    },
    100 : {
        color : 'rgb(14, 117, 56)'
    }
}
}, {
'id' : 'v-4',
'angle' : 0,
stops : {
    0 : {
        color : 'rgb(45, 117, 226)'
    },
    100 : {
        color : 'rgb(14, 56, 117)'
    }
}
}, {
'id' : 'v-5',
'angle' : 0,
stops : {
    0 : {
        color : 'rgb(187, 45, 222)'
    },
    100 : {
        color : 'rgb(85, 10, 103)'
    }
}
    } ],

    axes : [ {
    type : 'Numeric',
position : 'left',
fields : [ 'data1' ],
minimum : 0,
maximum : 100,
label : {
    renderer : Ext.util.Format.numberRenderer('0,0')
},
grid : {
    odd : {
        stroke : '#555'
    },
    even : {
        stroke : '#555'
    }
}
},     {
type : 'Category',
position : 'bottom',
fields : [ 'name' ]
} ],

series : [ {
type : 'column',
axis : 'left',
highlight : true,
label : {
    display : 'insideEnd',
    'text-anchor' : 'middle',
    field : 'data1',
    orientation : 'horizontal',
    fill : '#fff',
    font : '17px Arial'
},

renderer : function(sprite, storeItem, barAttr, i, store) {
    barAttr.fill = colors[i % colors.length];

    return barAttr;
},
tips: {
    trackMouse: true,
    width: 120,
    height: 50,
        renderer: function(storeItem, item) {
      var message='';
      if(upBarColFlag == false){message= 'Click Here to see Detailed Data';}
      else{message= 'Click Here to see Summarised Data';} 
      this.setTitle( message);

    }
  },

style : {
    opacity : 0.95
},
listeners: {
    'itemmouseup': function(o){ 
        refreshGrid(o);
    }
},
xField : 'name',
yField : 'data1'
} ]

});

var upBarColFlag =false; 

var counter =0;

function refreshGrid(o){
 if(counter==0 && upBarColFlag == false){
barWeekData = weekWiseData(4, 20);
st.loadData(barWeekData);
}
else if(counter==0 && upBarColFlag == true){
upBarColFlag = false;
counter--;
st.loadData(barMonData);
}
if(counter==1 && upBarColFlag == false){
upBarColFlag = true;
counter++;
barDayData = dayWiseData(7, 20);
st.loadData(barDayData);
}else if(counter==1 && upBarColFlag == true){

st.loadData(barWeekData);
}
if(upBarColFlag == false){
counter++;
}else{
    counter--;
   }

}

这是我没有 MVC 的 barChart，现在我已经创建了具有 MVC 结构的应用程序。这是我的 Controller 文件 ....

Ext.define('Gamma.controller.ControlFile', {

extend : 'Ext.app.Controller',

//define the stores
stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],


 models :     ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],

    views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],  

refs: [{
ref: 'radar',
selector: 'radarChart'
},{
ref: 'sms',
selector: 'smsPie'
},{
ref: 'gprs',
selector: 'gprsPie'
},{
ref: 'mms',
selector: 'mmsPie'
},{
ref: 'voice',
selector: 'voicePie'
}],

initializedEvents: false,
init: function() {
this.control({
    '#barColumnChart': {
        afterlayout: this.afterChartLayout
    }
});
},
afterChartLayout: function(){
var me=this;
if(this.initializedEvents==true) return;
this.initializedEvents=true;
Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown',function(obj){






    // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);

    // var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];
    var source=obj.storeItem.data['source'];
    var count=obj.storeItem.data['count'];
    me.dataBaseCall(source,count);
});

这是我的 View 文件...

var baseColor = 'rgb(0,0,0)';

var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];

Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',

constructor: function(config) {
this.callParent([Ext.apply({
    axis: {
        fill: baseColor,
        stroke: baseColor
    },
    axisLabelLeft: {
        fill: baseColor
    },
    axisLabelBottom: {
        fill: baseColor
    },
    axisTitleLeft: {
        fill: baseColor
    },
    axisTitleBottom: {
        fill: baseColor
            },
        colors: colors

     config)]);


});



 var bar=Ext.define('Gamma.view.BarColumnChart', {
extend: 'Ext.chart.Chart',
alias : 'widget.barColumnChart',
height:300,
width:Ext.getBody().getViewSize().width*0.6,
id:'barColumnChart',
xtype : 'chart',
  theme : 'Fancy',
   animate : {
    easing : 'bounceOut',
duration : 750
},
store : 'BarColumn',
background : {
fill : 'none'
},
gradients : [ {
   'id' : 'v-1',

 'angle' : 0,
   stops : {
       0 : {
       color : 'rgb(212, 40, 40)'
       },
       100 : {
          color : 'rgb(117, 14, 14)'
   }
  }  
  }, {
   'id' : 'v-2',
 'angle' : 0,
   stops : {
   0 : {
       color : 'rgb(180, 216, 42)'
   },
   100 : {
       color : 'rgb(94, 114, 13)'
   }
   }
   },

     {
   'id' : 'v-3',
   'angle' : 0,
   stops : {
   0 : {
       color : 'rgb(43, 221, 115)'
   },
   100 : {
       color : 'rgb(14, 117, 56)'
   }
   }
   }, {

   'id' : 'v-4',
   'angle' : 0,
   stops : {
   0 : {
       color : 'rgb(45, 117, 226)'
   },
   100 : {
       color : 'rgb(14, 56, 117)'
   }
   }

 }, {
   'id' : 'v-5',
   'angle' : 0,
   stops : {
   0 : {
       color : 'rgb(187, 45, 222)'
   },
   100 : {
       color : 'rgb(85, 10, 103)'



  } ],
 axes : [ {
type : 'Numeric',
position : 'left',
fields : [ 'count' ],
minimum : 0,
maximum : 3000,
label : {
    renderer : Ext.util.Format.numberRenderer('0,0')
},
grid : {
    odd : {
        stroke : '#555'
    },
    even : {
        stroke : '#555'
    }
}
}, {


 type : 'Category',
position : 'bottom',
fields : [ 'source' ]
} ],

series : [ {

  type : 'column',
axis : 'left',
seriesId: 'col',
highlight : true,
label : {
    display : 'insideEnd',
    'text-anchor' : 'middle',
    field : 'count',
    orientation : 'horizontal',
    fill : '#fff',
    font : '12px Arial'
},
renderer : function(sprite, storeItem, barAttr, i, store) {
    barAttr.fill = colors[i % colors.length];
    return barAttr;
},



style : {
    opacity : 0.95
},
xField : 'source',
yField : 'count'
} ],

afterComponentLayout: function(width, height, oldWidth, oldHeight) {
this.callParent(arguments);
this.fireEvent('afterlayout', this);
}
});

这是我的商店..

 Ext.define('Gamma.store.BarColumn', {
extend: 'Ext.data.Store',
model: 'Gamma.model.BarCol',
autoLoad: true,
pageSize: 100,
id:'BarColumn',


proxy: {
type: 'ajax',
url: 'CallRatiosAnalysis?methodName=callAnalysis',
reader: {
    type: 'json',
    root: 'topList',
    totalProperty: 'totalCount',
    successProperty: 'success'
}
  }

});

Answer 1

有一个 Highcharts 插件

http://www.sencha.com/forum/showthread.php?93669-Highcharts-adapter-and-plugin-for-ExtJS

或未记录的点击事件

http://druckit.wordpress.com/2013/03/19/ext-js-and-sencha-touch-charts-drill-down/

或根据其他地方的点击重新加载数据

http://www.sencha.com/forum/showthread.php?257113-Can-any-one-help-to-acheive-the-Drilldown-Charts-in-EXTJS

虽然我还没有尝试过。