Extjs 5 차트 범례 문제
-
21-12-2019 - |
문제
나는 legend
내 extjs 5 차트에 추가했는데 작동하지 않는 것 같습니다.이것은 버그인가요, 아니면 제가 뭔가 잘못하고 있는 건가요?
legend: {
docked: 'top',
style: {
borderColor: 'red',
borderStyle: 'solid'
}
}
해결책
나는 한동안 동일한 문제에 대해 작업해 왔으며 마침내 Sencha 버그 보고서를 제출했습니다.
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'
},
다른 팁
범례에서 비활성 계열을 마스킹하려면 삼항 연산자를 사용하여 값을 확인하세요.
<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