开发者

how to change color of scencha bar charts?

I am new to Scencha. I am using a bar chart example of Scencha charts. I could not change colors of the charts, it comes by default. Where can I change the color in the following code? How can I transpose bar chart also, it comes as left to right?

var barChart = new Ext.chart.Panel({
    title: 'Bar Chart',
    layout: 'fit',
    iconCls: 'bar',
    dockedItems: {
        iconCls: 'shuffle',
        iconMask: true,
        ui: 'plain',
        handler: onRefreshTap1
    },
    items: [{
        xtype: 'chart',
        cls: 'barcombo1',
        theme: 'Demo',
        store: store1,
        animate: true,
        shadow: false,
        legend: {
            position: {
                portrait: 'right',
                landscape: 'top'
            }
        },
        interactions: [
        'reset',
        'togglestacked',
        {
            type: 'panzoom',
            axes: {
                left: {}
            }
        },
        {
            type: 'iteminfo',
            gesture: 'taphold',
            panel: {
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    title: 'Details'
                }],

                html: 'Testing'
            },
            listeners: {
                'show': function(me, item, panel) {
                    var storeItem = item.storeItem;
                  //  panel.update('<ul><li><b>Month:</b> ' + storeItem.get('name') + '</li><li><b>Value: </b> ' + storeItem.get('2008') + '</li></ul>');
                }
            }
        },
        {
            type: 'itemcompare',
            offset: {
                x: -10
            },
            listeners: {
                'show': function(interaction) {
                    var val1 = interaction.item1.value,
                        val2 = interaction.item2.value;

                    barChart.descriptionPanel.setTitle('Trend from ' + val1[0] + ' to ' + val2[0] + '开发者_开发百科 : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
                    barChart.headerPanel.setActiveItem(1, {
                        type: 'slide',
                        direction: 'left'
                    });
                },
                'hide': function() {
                    barChart.headerPanel.setActiveItem(0, {
                        type: 'slide',
                        direction: 'right'
                    });
                }
            }
        }],
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['TY', 'LY'],
            label: {
                renderer: function(v) {
                    return v.toFixed(0);
                }
            },
            title: 'Hits (Billions)',
            minimum: 0
        },
        {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: 'Weeks'
        }],
        series: [{
            type: 'bar',
            label: {
               Field:'TY'
            },
            xField: 'name',
            yField: ['TY', 'LY'],
            axis: 'bottom',
            highlight: true,
            showInLegend: true

        }]
    }]
});


Change the type 'bar' to 'column' in the following snippet:

series: [{
            type: 'bar',
            label: {
               Field:'TY'
            },
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜