extjs4: как настроить метку оси в каждом слове - PullRequest
3 голосов
/ 04 марта 2012

Я сейчас использую extjs 4 с Ext.chart.axis.Category.

Но как настроить ярлык в каждом слове?

Скажем, у меня есть 72 числа на этикетке в нижней части оси, и я хочу только жирный 24 и 48.

Я проверил Ext.chart.Label и обнаружил, что есть полезная функция с именем renderer. Но он используется только для изменения текста, а не для изменения стиля.

Мой пример кода:

{
    xtype: 'chart',
    id: 'monitorAmmeter72chart',
    animate: false,
    region: 'center',
    store:Ext.data.StoreManager.lookup('monitorAmmeter72Store'),
    axes: [
        {
            type: 'Category',
            fields: ['hourDis'],
            position: 'bottom',
            title: 'blablabla',
            grid: true,
            label:{
                renderer:function(v){
                    if(v == '24'){
                        return '<b>24</b>';//Note, this won't work.
                    }else{
                        return v;
                    }
                }
            }
        },
        {
            type: 'Numeric',
            fields: ['data'],
            position: 'left',
            title: 'another blablabla',
            grid: true,
            minimum: 0
        }
    ],
     series: [
        {
            type: 'column',
            axis: 'left',
            highlight: false,
            tips: {
              trackMouse: false,
              width: 50,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('data') + ' xx');
              }
            },
            style: {
                fill: '#38B8BF'
            },
            gutter: 20,
            xField: 'hour',
            yField: 'data'
        }
    ]
}

Ответы [ 2 ]

3 голосов
/ 27 июня 2013

Я использую extjs 4.2.1, и я делаю:

label: {
 renderer: function(v) {
  if(v == 'Capitale-Nationale'){
   this.font = "bold 12px Arial, Helvetica, sans-serif";
   this.padding = 5;
  }
  else{
   this.font = "12px Arial, Helvetica, sans-serif";
   this.padding = 5;
  }
  return v;
 }
},
0 голосов
/ 05 марта 2012

Вы можете создать HTML-строку в рендере и стилизовать ее так, как вам нужно.Разве это не вариант?

...