为Sencha条形图上的每个类别项目指定不同的颜色

Question

我很喜欢这件事。我想要做的是给sencha图表上的每个条形图一个不同的颜色。这是我到目前为止： 这是我的代码：

Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function() {
    Ext.regModel('Retail', {
        fields: [
        {name: 'id', type: 'string'},
        {name: 'quantity',  type: 'int'}
        ]
    });

   var retailStore =  new Ext.data.JsonStore({
        model: 'Retail',
        proxy: {
            type: 'ajax',
            url: 'getData.php',
            reader: {
                type: 'json',
            }
        },
        autoLoad: true
   });


   console.log(retailStore);


    new Ext.chart.Panel({
        id: 'chartCmp',
        title: 'Stock Example',
        fullscreen: true,
        dockedItems: {
            xtype: 'button',
            iconCls: 'shuffle',
            iconMask: true,
            ui: 'plain',
            dock: 'left'
        },
        items: {
            cls: 'stock1',
            theme: 'Demo',
            legend: {
                position: {
                    portrait: 'right',
                    landscape: 'top'
                },
                labelFont: '17px Arial'
            },
            interactions: [{
                type: 'panzoom',
                axes: {
                    left: {
                        maxZoom: 2
                    },
                    bottom: {
                        maxZoom: 4
                    }
                }
            }],
            animate: false,
            store: retailStore,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['quantity'],
                title: 'Quantity'
            }, {
                type: 'Category',
                position: 'left',
                fields: ['id'],
                title: 'Products'
            }],
            series: [{
                type: 'bar',
                axis: 'right',
                xField: 'id',
                yField: ['quantity'],
            }]
        }
    });
}});

我知道应该有一些方法可以通过添加一个额外的维度来“欺骗”图表，就像在这里完成一样： http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Bar/

每年代表一种新产品。我想对我做同样的事情，每个产品代表不同的维度。

Answer 1

您可以使用系列的渲染器功能。您只需将attributes.fill更改为每个条形所需的颜色即可。以下是一个示例：http://bl.ocks.org/3511876和代码：

Ext.setup({
    onReady: function() {
        var data = [];

        for (var i = 0; i < 10; i++) {
            data.push({
                x: i,
                y: parseInt(Math.random() * 100)
            });
        }

        var colors = ['blue', 'yellow', 'red', 'green', 'gray'];

        var store = new Ext.data.JsonStore({
            fields: ['x', 'y'],
            data: data
        });

        var chart = new Ext.chart.Chart({
            store: store,
            axes: [{
                type: 'Category',
                fields: ['x'],
                position: 'left'
            }, {
                type: 'Numeric',
                fields: ['y'],
                position: 'bottom'
            }],
            series: [{
                type: 'bar',
                xField: 'x',
                yField: 'y',
                axis: 'bottom',
                renderer: function(sprite, record, attributes, index, store) {
                    attributes.fill = colors[index%colors.length];

                    return attributes;
                }
            }]
        });

        new Ext.chart.Panel({
            fullscreen: true,
            chart: chart
        });

        chart.redraw();
    }
});