extjs 如何修改字体颜色和字体大小在 Sencha 图表的轴文本

0g0grzrc  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(352)

请帮助这,如何改变字体颜色和字体大小在 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'],
        }
],
sigwle7e

sigwle7e1#

您需要为此图表定义自定义主题:

Ext.define('Ext.chart.theme.StackOverflow', {
    extend: 'Ext.chart.theme.Green',

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

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

Ext.create('Ext.chart.Chart', {
    theme: 'StackOverflow'
    //[...] 
}

下面是一个完整的示例:
http://jsfiddle.net/L4x72q3j/
以下是一些较早但仍然有效的详细信息:http://docs.sencha.com/extjs/4.1.3/#!/guide/drawing_and_charting-section-theming
这里基于较新的ExtJ版本:http://docs.sencha.com/extjs/6.5.0/classic/Ext.chart.theme.Base.html#cfg-axis

798qvoo8

798qvoo82#

使用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

相关问题