여러 하이 차트의 동일한 구성

Question

EXTJS 4.1.1 응용 프로그램에서 사용되는 하이 차트 3 개를 사용하여 거의 동일한 구성으로 을 사용합니다. 은 또한 다음이 개 차트에 대해이 같이

var config = { 
// configurations 
} 

Ext.define('chartsA',{ 
    extend:'Ext.panel.Panel', 
    items:[{ 
     xtype:'highcharts', 
     chartConfig:{ 
     // config defined above 
     // customConfigs for the particluar chart (if any) 
     } 
    }] 
}); 

같은 것을 할 수 있습니다.

할 방법이 있습니까?

Answer 1

예제 코드를 참조하십시오. 작동합니다. 아래의 모든 코드는 컨트롤러 내부에 작성해야합니다.

참고 : 모든 MyChart.xxxxx 값은 내 사용자 지정 CSS 파일에 기록됩니다. 당신은 자신의 CSS를 작성하거나 값을 하드 코드 할 수 있습니다.

/* 
* Inside init function of controller 
*/ 
this.control({ 
      'Panel[id = chartPanel]' : { 
       afterrender : this.onPanelRendered 
      } 




/* 
* This function will be invoked on initial rendering of chart panel 
*/ 
    ,onPanelRendered : function(chartPanel) { 
     this.loadPanel(chartPanel); 
    } 




,loadPanel : function(chartPanel) { 
     this.setChartTheme(); 
     this.updateChartInfo(); 

    } 




/* 
    * to set chart custom theme 
    */ 
    ,setChartTheme:function(){ 
     Ext.define('Ext.chart.theme.myTheme',{ 
      extend:'Ext.chart.theme.Base' 
      ,constructor:function(config){ 
       this.callParent([Ext.apply({ 
        axisTitleTop: { 
         font: MyChart.chartThemeAxisTitleTopFont, 
         fill: MyChart.chartThemeAxisTitleTopFill 
        }, 
        axisTitleRight: { 
         font: MyChart.chartThemeAxisTitleFont, 
         fill: MyChart.chartThemeAxisTitleTopFill, 
         rotate: { 
          x:MyChart.chartThemeAxisTitleRotatex, 
          y:MyChart.chartThemeAxisTitleRotatey, 
          degrees: MyChart.chartThemeAxisTitleRotateDegree 
         } 
        }, 
        axisTitleBottom: { 
         font: MyChart.chartThemeAxisTitleFont, 
         fill: MyChart.chartThemeAxisTitleTopFill 
        }, 
        axisTitleLeft: { 
         font: MyChart.chartThemeAxisTitleFont, 
         fill: MyChart.chartThemeAxisTitleTopFill, 
         rotate: { 
          x:MyChart.chartThemeAxisTitleRotatex, 
          y:MyChart.chartThemeAxisTitleRotatey, 
          degrees: MyChart.chartThemeAxisTitleRotateDegree 
         } 
        } 
       },config)]) ; 

      } 
     }); 
    } 






,updateChartInfo : function() { 
     this.updatexChart(); 
     Ext.getCmp(<Ur panel id>).add(MyChart.xChart); 

    } 





,updatexChart:function(){ 

     MyChart.xChart = Ext.create('Ext.chart.Chart',{ 
      ........ 
      ........ 
      ........ 
      ,style : 
      ,theme : 'myTheme' // This is our custom theme 
      ,legend : { 
       position  : 
       labelFont  : 
      } 
      ,store : 
      ,axes :[ 
       { 
        type  : 
        ,position: 
      ...... 
      ....... 
      ....... 

감사