[英]extjs change chart axes label color
我有一个带有轴标签的图表,我想将标签的颜色从黑色更改为红色。 我看过这里: 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,在哪里定义自定义主题类,如何将其包括在内?
编辑 :我想出了一种更简单的方法(不使用主题),请参见下文
请参考示例代码,它将起作用。 下面所有的代码都需要写在控制器内部。
注意:所有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:
......
.......
.......
谢谢
找到了一种更简单的方法,无需使用主题。
要配置轴的标题标签颜色,只需将标签标题配置添加到该轴:
labelTitle:{
fill:"#B22222"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.