如何修改 sencha 图表中轴文本的字体颜色和字体大小

Posted 2023-02-26

【中文标题】如何修改 sencha 图表中轴文本的字体颜色和字体大小

【英文标题】：How to modified the font colour and font size in sencha chart for axes text

【发布时间】：2017-06-13 06:45:04

【问题描述】：

请帮助解决这个问题，如何在 sencha 图表中更改轴文本的字体颜色和字体大小

这是我的示例图表

http://jsfiddle.net/onlinesolution/djaydxnd/58/

 axes: [
   
            type: 'Numeric',
            position: 'bottom',
            fields: ['data1'],
            minimum: 0,
            maximum:20,
            fontSize:20
        , 
            type: 'Category',
            position: 'top',
            fields: ['month'],
        
],

【参考方案1】：

您需要为此图表定义一个自定义主题：

Ext.define('Ext.chart.theme.***', 
    extend: 'Ext.chart.theme.Green',

    constructor: function(config) 
        this.callParent([Ext.apply(
            axisLabelBottom: 
                font: '22px Arial'
            
        , config)]);
    
);

稍后您可以在图表配置中使用此主题：

Ext.create('Ext.chart.Chart', 
    theme: '***'
    //[...] 

这是一个完整的例子：http://jsfiddle.net/L4x72q3j/

以下是一些较旧但仍然有效的详细信息： http://docs.sencha.com/extjs/4.1.3/#!/guide/drawing_and_charting-section-theming 在这里同样基于较新的 ExtJs 版本： http://docs.sencha.com/extjs/6.5.0/classic/Ext.chart.theme.Base.html#cfg-axis

【讨论】：

感谢@Artem Stepin，它的工作完美符合我的预期，也感谢您分享文档链接。

【参考方案2】：

为 ExtJS 6.5.2 使用标签配置。

axes: [
  ...
  label: 
    font: '10px Open Sans'
  
]

ExtJS 文档：https://docs.sencha.com/extjs/6.5.2/classic/Ext.chart.axis.Axis.html#cfg-label