简体   繁体   English

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

[英]How to modified the font colour and font size in sencha chart for axes text

please help on this, how to change the font colour and font size in sencha chart for axes text请帮助解决这个问题,如何更改 sencha 图表中轴文本的字体颜色和字体大小

here my sample chart这是我的示例图表

http://jsfiddle.net/onlinesolution/djaydxnd/58/ 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'],
        }
],

You need to define a custom theme for this chart: 您需要为此图表定义一个自定义主题:

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

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

Later on you can use this theme in your chart configuration: 稍后,您可以在图表配置中使用此主题:

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

Here is a full example: 这是一个完整的示例:
http://jsfiddle.net/L4x72q3j/ http://jsfiddle.net/L4x72q3j/

Here are some older but still valid details on this: http://docs.sencha.com/extjs/4.1.3/#!/guide/drawing_and_charting-section-theming 以下是一些较旧但仍有效的详细信息: http : //docs.sencha.com/extjs/4.1.3/#!/guide/drawing_and_charting-section-theming
and here the same based on newer ExtJs versions: http://docs.sencha.com/extjs/6.5.0/classic/Ext.chart.theme.Base.html#cfg-axis 并且基于更新的ExtJs版本也是如此: http : //docs.sencha.com/extjs/6.5.0/classic/Ext.chart.theme.Base.html#cfg-axis

Use label config for ExtJS 6.5.2.使用 ExtJS 6.5.2 的标签配置。

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM