extjs更改图表轴标签颜色

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

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

编辑：我想出了一个更简单的方法来做到这一点（不使用主题），请参阅下面

来源

2013-04-24 alex9311

找到一个更简单的方式做到这一点，不使用主题。

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

labelTitle:{ 
    fill:"#B22222" 
}

来源

2013-04-25 21:31:43 alex9311

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

注意：所有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-24 05:42:52 Hariharan

谢谢！我发现了一种更简单的方法来更改轴标题标签的颜色，但如果我需要使用主题，我会参考您的主题代码。谢谢 – alex9311 2013-04-25 21:34:05

extjs更改图表轴标签颜色

回答

相关问题