Можно ли динамически изменять цвета на графиках в ExtJs / YUI Charts?

Question

Я использую диаграммы ExtJs / YUI в своем приложении.Что мне интересно, возможно ли динамическое изменение цвета на любом из графиков на основе данных?

, т.е. у меня есть хранилище, в котором есть поле, содержащее шестнадцатеричный цвет для этой конкретной строки.Можно ли динамически установить цвет столбца в столбчатой ​​диаграмме с шестнадцатеричным значением?

Answer 1

Взгляните на это сообщение в блоге .Когда вы конфигурируете объект диаграммы, передайте объект серии со свойством стиля, как описано в этом посте, чтобы определить цвета и их последовательность.

Тогда вам просто нужно получить свои цвета, просматривая записи магазина.и создание нового массива или, возможно, извлечение его из вашего магазина с помощью store.query.Затем передайте этот массив как свойство.

(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)

Answer 2

Из того, что я смог найти, вы можете использовать метод

(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)

, если вы создаете круговую диаграмму (или другую диаграмму с атрибутом series.colors), и она прекрасно работает.

Если вы используете тип диаграммы, которая не поддерживает series.colors ... она становится немного более запутанной.Я обнаружил, что использование метода рендерера работает довольно хорошо.Единственная проблема с этим методом (который я вижу сразу) состоит в том, что он не меняет цвета в легенде.Потребовалось бы дополнительное редактирование, чтобы увидеть, можно ли это вытащить из магазина

Если вы выясните проблему с легендой, дайте мне знать, но я надеюсь, что это поможет.

Примечание. Не все переменные, используемые в приведенном ниже сценарии, заполняются в сценарии.

function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
    return aFiller[rec];
}
Ext.onReady(function() {
    var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
    chart = new Ext.chart.Chart({
        renderTo: document.getElementById('test-graph'),
        width: 800,
        height: 600,
        animate: true,
        store: sDataStore,
        legend: {
            position: 'right',
            isVertical: true,
        },
        axes: [{
            type: 'Numeric',
            grid: true,
            position: 'left',
            fields: ['field1','field2','field3','field4'],
            title: 'Title Here',
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 1
                }
            },
            minimum: 0,
            adjustMinimumByMajorUnit: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: label1,
            title: sXAxisLabel,
            grid: true,
        }],
        series: [{
            renderer: function(sprite, record, curAttr, index, store) {
                var color = myColorer(index);
                return Ext.apply(curAttr, {
                    fill: color
                });
            },
            type: 'area',
            highlight: false,
            axis: 'left',
            xField: label1,
            yField: ['field1','field2','field3','field4'],
            style: {
                opacity: 0.93
            }
        }]
    });
});

Answer 3

Да, вы можете сделать это с помощью рендереров. Следующий пример кода изменяет цвета баров в гистограмме:

            series: {
                type: 'bar',
                xField: 'name',
                yField: 'value',
                label:{
                    field: 'value'
                },
                renderer: function(sprite, config, rendererData, index) {

                    var record = rendererData.store.getData().items[index];

                    return Ext.apply(rendererData, {
                        fillStyle: record.data.color,
                    });
                }
            }

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

Answer 4

Попробуйте:

1. Создайте скрытое поле и присвойте его значение значению поля магазина, которое содержит значение цвета.
2. при рендеринге гистограммы установите цвет фона столбца на значение скрытого поля.