пятница, 17 октября 2014 г.

Correctly display of negative ranges on ExtJS bar graphs

Bar graphs from Sencha ExtJS are great, but not without challenges for developers:) On of such issue I found during building graph with both, positive and negative, ranges. For example, your values are in the range [-100, 100].  In this case default behaviour of bar chart will be to have bars drawn from "zero" vertical line, but you need to be drawn from -100. My solution was to change values first to be "actualValue+100" (always positive in our case) and then make labels display correct value, it's done with customized render function:

axes: [{
        type: 'numeric',
        position: 'bottom',
        fields: 'score',
        minimum: 0,
        maximum: 200,
        majorTickSteps: 4,
        renderer: function (v) {
            // Make axis label display correct actual value
            return v - 100;
        }
    },
    ...

Комментариев нет:

Отправить комментарий