让我们来看看this example ...如何更改这些酒吧的颜色?
我知道我可以通过渲染器更改它,但它不会改变图例。
我试过用:
style: {fill: 'red'}
但它会改变任何颜色的颜色
我试图将颜色放在数组中,但它不起作用。
我试图将每个样式放在数组中,如下所示:
style: [{fill: 'red'}, {fill: 'green'}, {fill: 'blue'}]
但它也不会起作用,因为我可以将标题放在数组中,如:
title: ['title1', 'title2', 'title3']
我认为(样式)也应该有效但不是。
那么如何更改每个“数据”栏的颜色?
答案 0 :(得分:10)
条形颜色实际上由chart's theme确定:
Ext.create('Ext.chart.Chart', {
theme: 'myTheme'
//the remainder of your code...
});
要使用自定义颜色,您需要扩展现有的“基本”主题,如custom area chart example中所示。
答案 1 :(得分:4)
图表使用Theme作为mixins
所以你可以直接使用名为themeAttrs的主题属性。
例如,如果您在列/堆积柱形图的构造函数中,想要更改列的颜色您可以指定
this.themeAttrs.colors = ['#F2C72B','#a5c249','#E88712','#9D5FFA'];
答案 2 :(得分:3)
Ext.onReady(function()
{
Ext.create('Ext.window.Window',
{
title: 'Pie1 Chart',
height: 400,
layout: 'fit',
width: 400,
items:
[{
xtype: 'chart',
animate:false ,
insetPadding:0,
legend:
{
position: 'right'
},
shadow: true,
store:
{
fields:
[{
name: 'category', type: 'string'
},
{
name: 'data', type: 'float'
}],
data:
[{
category: 'Alive', data: 1.5
},{
category: 'Dead', data: 2
},{
category: 'Standby', data: 1
}]
},
series: [{
type: 'pie',
field: 'data',
colorSet: ['#0000FF','#FFffff','#00FF00'],
showInLegend: true, <!--It is use to display data in which color.-->
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'category',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}]
}).show();
});
使用colorSet可以改变颜色。
答案 3 :(得分:1)
我决定添加完整代码:
Ext.require('EAM.view.chart.*');
Ext.define('EAM.view.chart.integral.IntegralChart',
{
extend : 'Ext.chart.Chart',
alias : 'widget.GroupsIntegralChart',
animate : true,
shadow : true,
// theme : 'Browser:gradients',
initComponent : function()
{
var me = this;
me.themeAttrs.colors =
[
'orange',
'red',
'blue',
'green',
];
me.callParent(arguments);
},
...
答案 4 :(得分:0)
如果你不想使用主题,你可以使用它(至少它对我有用):
this.series = [{
type: 'column',
axis: 'left',
showInLegend : true,
xField: 'f1',
style :{
fill : '#ff00ff',
'stroke-width': 3,
width: 20
},
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = '#ff00ff';
barAttr.width = 20;
return barAttr;
},
title : 'title',
yField: 'f2'
}]
请注意,您必须将颜色放在两个不同的行中(我认为ExtJS有时候是一种愚蠢的框架)。
答案 5 :(得分:0)
我正在使用Ext JS 5.0 无需担心,只需在系列中包含颜色配置。
series : [{
type : 'bar',
colors:['#f23f3f','#ff8809','#ff0','#0039a6','#00ee88','#ff8aed'],
xField : ['Q1']
yField : ['Critical', 'Major', 'Minor', 'Warning', 'Informational', 'Indeterminent']
}]