Question

我有一个带有轴标签的图表，我想将标签的颜色从黑色更改为红色。我看过这里：http://www.sencha.com/learn/drawing-and-charting/在“主题”之下，我想我可以通过定义自定义主题来做我想做的事情并做这样的事情：

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，我在哪里定义自定义主题类，如何包含它？

编辑：我想出了一个更简单的方法（不使用主题），见下文

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

由于

Answer 2

在不使用主题的情况下，找到了一种更简单的方法。

要配置轴的标题标签颜色，只需将标签标题配置添加到该轴：

labelTitle:{
   fill:"#B22222"
}

extjs更改图表轴标签颜色

2 个答案: