Уменьшите количество видимых меток под диаграммой Ext JS 4 - PullRequest
Новая
       18

Уменьшите количество видимых меток под диаграммой Ext JS 4

0 голосов
/ 21 октября 2011

Я пишу Ext JS 4 компонент линейной диаграммы.Все работает нормально, но когда я отображаю метки под осью, они слишком плотные.Я не буду уменьшать количество видимых ярлыков.Как это сделать?Вот мой код для оси: 

{
    type: 'Category',
    position: 'bottom',
    fields: ['date'],
    grid: true,
    label: {
        field: 'label',
        rotate: { degrees:315 },
        renderer: function(item) {
            var date = new Date(item);
            /* parseIntToStringWithZeros is a custom method somewhere else */
            var day = parseIntToStringWithZeros(date.getDate());
            var month = parseIntToStringWithZeros(date.getMonth());
            result = day + '-' + month;
            return result;
        }
    }
}

1 Ответ

1 голос
/ 29 ноября 2011

Я думаю, что вам может понадобиться использовать ось «Числовая» вместо оси «Категория» для начала (не уверен, как выглядят ваши данные, но вам может потребоваться преобразовать время в значения, чтобы они работали).

С помощью числовой оси вы должны иметь возможность установить количество основных значений тиков (где появляются линии сетки и метки), установив свойство steps в конфигурации оси;Однако это не всегда работает.Более верный способ - переопределить функцию applyData, которая не документирована, поэтому вам нужно выполнить поиск по коду dev, чтобы увидеть, что он делает.вернуть пустую строку в функцию визуализации метки.например, если вы хотите, чтобы отдельный «месяц» отображался в приведенном выше коде один раз, вы можете сделать что-то вроде этого. 

label: {
    ....
    renderer: (function(){
       var lastRenderedMonth = '';
       return function(item){
           ... //your code above without the return..
           if(month == lastRenderedMonth)
              return "";
           lastRenderedMonth = month;
           return result;
       };
    })(),
    ...
...