Question

我在EXTJS 4.1.1应用程序中使用了三个高图，几乎使用相同的配置。 我可以拥有像

这样的东西吗？

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:  
           ......
           .......
           .......

由于

多个Highcharts中的相同配置

1 个答案: