题
我正在尝试添加一个 legend
到我的 extjs 5 图表,它似乎不起作用。这是一个错误还是我做错了什么?
legend: {
docked: 'top',
style: {
borderColor: 'red',
borderStyle: 'solid'
}
}
解决方案
我已经在同一个问题上工作了一段时间 - 最后提交了一份 Sencha Bug 报告:
http://www.sencha.com/forum/showthread.php?289279-Sencha-5-Charts-Broken-Legend
长话短说,“据说”在下一个 EXTjs 推出中会修复这个问题。不幸的是,这对我们现在没有帮助......
但是,您可以为图例创建一个 tpl - 但我的 tpl 不如本机 extjs 图例那么强大。它仍然会显示/隐藏该系列,但不会掩盖图例中的系列。我仍在完善 TPL,并会在工作完成后发布更新。
legend: {
docked: 'top',
border: 0,
style: { borderColor: 'red' },
tpl: [
'<tpl for=".">',
'<div class="myLegendItem" style="float:left;margin:5px;padding:0px;cursor:pointer;">',
'<div class="" style="float:left;margin:2px;width:10px;height: 10px; background:{mark};opacity:.6"></div><div style="float:left;">{name}</div>',
'</div>',
'</tpl>'
],
itemSelector: '.myLegendItem'
},
其他提示
要屏蔽图例中的非活动系列,请使用三元运算符检查 value.disabled
<div class="x-legend-container">
<tpl for=".">
<div class="x-legend-item {[ values.disabled ? Ext.baseCSSPrefix + 'legend-inactive' : '' ]}">
<span class="x-legend-item-marker" style="background:{mark};float:left;width:10px;height:10px;"></span>
<span style="float:left;margin-left:4px;">{name}</span>
</div>
</tpl>
</div>
另外,如果需要的话,添加一个 css 类
x-legend-inactive{
opacity: 0.5;
}
不隶属于 StackOverflow