extjs променя цвета на етикета на осите на диаграмата

Имам диаграма с етикети на осите и искам да променя цвета на етикетите от черен на червен. Погледнах тук: http://www.sencha.com/learn/drawing-and-charting/ под "theming" и мисля, че мога да направя каквото искам, като дефинирам персонализирана тема и направя нещо подобно:

axisTitleTop: {
    fill: '#000',
    font: '11px Arial'
},
axisTitleLeft: {
    fill: '#000',
    font: '11px Arial'
},
axisTitleRight: {
    fill: '#000',
    font: '11px Arial'
},
axisTitleBottom: {
    fill: '#000',
    font: '11px Arial'
},

да се забъркваш със заглавията на осите.

Въпросът ми е: използвайки MVC, къде да дефинирам своя персонализиран клас тема и как да го включа?

РЕДАКТИРАНЕ: Намерих много по-лесен начин да направя това (без да използвам теми), вижте по-долу


colors themes model-view-controller axes extjs
person alex9311    schedule 24.04.2013    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Моля, вижте примерен код, той ще работи. Целият код по-долу трябва да бъде написан вътре в контролера.

Забележка: Всички стойности на 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:  
           ......
           .......
           .......

Благодаря

person Hariharan    schedule 24.04.2013
comment
Благодаря! Намерих по-лесен начин да променя цвета на етикета на заглавието на осите, но ще се позова на кода на вашата тема, ако някога ми се наложи да използвам теми. Благодаря ти - person alex9311; 26.04.2013

arrow_upward
0
arrow_downward

Намерих по-лесен начин да направите това, без да използвате теми.

За да конфигурирате цвета на заглавния етикет на дадена ос, просто добавете конфигурацията на заглавния етикет към тези оси:

labelTitle:{
   fill:"#B22222"
}
person alex9311    schedule 25.04.2013