Блог

Я пишу компонент линейной диаграммы 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 resu<
        }
    }
}
 

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

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

Кроме того, чтобы просто не отображать конкретную метку, вы можете просто вернуть пустую строку в функции визуализации метки. например, если вы хотите, чтобы отдельный «месяц» отображался только один раз в приведенном выше коде, вы могли бы сделать что-то вроде этого..

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