2011-08-17 98 views
0

我是Scencha的新手。我正在使用Scencha图表的条形图示例。我无法更改图表的颜色,它默认是自带的。我在哪里可以更改以下代码中的颜色?我怎样才能转换条形图,它是从左到右?如何更改scencha条形图的颜色?

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 

     }] 
    }] 
}); 

回答

1

变化在下面的代码片断类型'bar''column'

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