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'
},
精彩评论