在EXTJS 5图表中使用自定义图例颜色时出现问题。我可以将自定义颜色应用于图表图例,但我无法将其应用于图例项目。在EXT JS 4中,我可以使用一个覆盖函数来处理它。像将自定义图表栏颜色标记为EXT JS中的图例5
getLegendColor: function(index) {
var proSpeciality = ["#EFD07B","#0082AD"];
return proSpeciality[index];
}
但是,这是不是在EXT JS 5
示例代码可用。
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: 'fit',
items: {
xtype: 'cartesian',
store: {
fields: ['name', 'value','value2'],
data: [
{name: 'metric one', value: 10,value2: 15},
{name: 'metric two', value: 7,value2: 15},
{name: 'metric three', value: 5,value2: 15},
{name: 'metric four', value: 2,value2: 15},
{name: 'metric five', value: 27,value2: 15}
]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'value'
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name'
}],
legend: {
docked: 'top',
style: {
stroke: '#ffffff',
'stroke-width': 2,
opacity: 1
},
tpl: [
'<tpl for="."> ',
' <div class="myLegendItem" style="float:left;margin:5px;padding:0px;cursor:pointer;">',
' <div class="" style="float:left;margin:2px;width:12px;height: 12px; background:{mark};"></div><div style="float:left;">{name}</div> ',
' </div> ',
' </tpl>'
],
itemSelector: '.myLegendItem'
},
series: {
type: 'bar',
xField: ['name'],
yField: ['value','value1'],
stacked: false,
renderer: function(sprite, record, attributes, index, store) {
var proSpeciality = ["#EFD07B","#0082AD","#00A67B","#AD1808","#520084"];
attributes.fill = proSpeciality[index % proSpeciality.length];
return attributes;
},
getLegendColor: function(index) {
var proSpeciality = ["#EFD07B","#0082AD"];
return proSpeciality[index];
}
}
}
});
请让我知道,如果我需要改变一些东西。
在此先感谢
这是不错的选择。但我有一个快速的问题。在某些情况下,我需要动态地传递颜色代码。因此,我将使用颜色代码的全球阵列。它将根据用户选择而改变。所以我不能硬编码。 – 2014-10-10 11:50:59
这是一个很好的问题,但不幸的是我不知道答案。让我知道你是否会最终找到解决方法。 – 2014-10-10 12:15:34
最后我得到了解决方案。我在tpl中添加了一个函数。 whick会根据索引返回颜色。 – 2014-10-10 14:32:09