【问题标题】:How to modified the font colour and font size in sencha chart for axes text如何修改 sencha 图表中轴文本的字体颜色和字体大小
【发布时间】: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'],
        }
],

【问题讨论】:

    标签: javascript html css extjs sencha-touch


    【解决方案1】:

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

    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
    在这里同样基于较新的 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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-09
      • 1970-01-01
      • 2018-01-23
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多