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

I'm kind of stuck with this thing. What I want to do is to give each bar on a sencha chart a different color. This is what I have so far: And this is my code for it:

我有点坚持这件事。我想要做的是给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'],
            }]
        }
    });
}});

I know there should be some way to "cheat" the chart by adding an extra dimension to it, just as it is done here: http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Bar/

我知道应该通过添加额外的维度来欺骗图表，就像在这里完成一样：http：//dev.sencha.com/deploy/touch-charts-1.0.0/examples/酒吧/

There each year represents a new product. I'd like to do the same with mine, each product representing a different dimension.

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

1 个解决方案

#1

You can use the renderer function of a serie. You just have to change attributes.fill to the color you want for each bar. Here is an example : http://bl.ocks.org/3511876 and the code :

您可以使用系列的渲染器功能。您只需将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();
    }
});