Как изменить порядок рядов линейных графиков ExtJS - PullRequest
Новая
       18

Как изменить порядок рядов линейных графиков ExtJS

1 голос
/ 02 января 2012

У меня есть линейный график с несколькими сериями в 4.02. В разных точках линии ряда пересекаются, мне нужно, чтобы в качестве верхней линии оставалась определенная линия, то есть самый большой z-индекс (чтобы эта линия выделялась и отображала свои кончики при наведении на них, в отличие от других).

Я не хочу просто переупорядочивать последовательность, в которой серии написаны в javascript, потому что мне нужно, чтобы последовательность легенд оставалась неизменной (все они названы как даты, и я хочу сохранить их в порядке дат).

Я искал какую-то конфигурационную опцию Ext.chart.series.Line для установки z-индекса, но не удалось.

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

Есть идеи?

EDIT:

Я добавил конфигурацию zindex в мою расширенную тему диаграммы, она не выдает ошибок, но ничего не меняет в диаграмме вообще (первая серия, указанная с помощью z-index 4, находится внизу, z-index 5 - это второй снизу, z-index 3 - третий снизу и т. д.), кажется, что он где-то переопределен: 

// CUSTOM CHART THEME
Ext.chart.theme.Events = Ext.extend(Ext.chart.theme.Base, {
    constructor: function(config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
            colors: ['rgb(0, 0, 0)', 
                     'rgb(0,0,255)', 
                     'rgb(255,0,0)', 
                     'rgb(0,128,0)', 
                     'rgb(128,0,128)'
            ],
            seriesThemes: [{
                'stroke-width': 3,
                zindex: 4
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 5
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 3
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 2
            }, {
                'stroke-width': 1,
                smooth: false,
                zindex: 1
            }]                
        }, config));
    }
});

1 Ответ

1 голос
/ 03 января 2012

Хорошо, я разобрался, zIndex не zindex в пользовательской теме: 

// CUSTOM CHART THEME
Ext.chart.theme.Events = Ext.extend(Ext.chart.theme.Base, {
    constructor: function(config) {
        Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
            colors: ['rgb(0, 0, 0)', 
                     'rgb(0,0,255)', 
                     'rgb(255,0,0)', 
                     'rgb(0,128,0)', 
                     'rgb(128,0,128)'
            ],
            seriesThemes: [{
                'stroke-width': 3,
                zIndex: 4
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 5
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 3
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 2
            }, {
                'stroke-width': 1,
                smooth: false,
                zIndex: 1
            }]                
        }, config));
    }
});
...