相同的配置在多个Highcharts

我有三个highcharts用于EXTJS 4.1.1应用程序，几乎使用相同的配置。 我能有这样的事情相同的配置在多个Highcharts

var config = { 
// configurations 
} 

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

喜欢本作的接下来的两个图也。

有没有办法做到这一点？

来源

2013-04-29 user2803

这将可能帮助：http://stackoverflow.com/questions/8253590/manage-multiple-highchart-charts-in-a-single-webpage – 2013-04-29 11:55:19

我用了一个父类和扩展它为其他图表。 – user2803 2013-04-30 12:37:37

请参考示例代码，它会工作。以下所有代码都需要写入控制器。

注意：所有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: 
      ...... 
      ....... 
      .......

感谢

来源

2013-04-29 11:17:17 Hariharan

相同的配置在多个Highcharts

回答

相关问题