Mam problem z nakładaniem się podpowiedzi Highcharts na sam wykres. Proszę znaleźć następujące informacje obraz, który przedstawia to samo:
Gdy LS jest aktywne:
Gdy LS jest dezaktywowane
(Skala dwóch wykresów jest inna, ponieważ ustawiam dynamiczną wysokość wykresu za pomocą $ (window) .height (), które nie zostało jeszcze naprawione przez Salesforce , gdy LS jest aktywne.)
Kod:
Pomocnik:
drawChart : function(component, helper) { if(component.isValid() && component.get("v.isResourcesLoaded") && component.get("v.isDataChanged")) { var stackedColumnChartObj = new Highcharts.Chart({ chart: { renderTo: component.find("stackedColumnChart").getElement() }, title: { text: null }, xAxis: { categories: labelList, title: { text: null }, labels: { enabled: true, format: "`{value}" } }, yAxis: [{ enabled: true, title: { text: null } }], plotOptions: { series: { animation: false, cursor: "pointer", marker: { enabled: false } } }, tooltip: { useHTML: true, borderWidth: 0, borderRadius: 0, backgroundColor:"rgba(255,255,255,0)", shadow: false, formatter: function(){ var s = this.series.name + ": "+ "<br/>Total: " +this.stackTotal; return ("<div class="tooltip">" + s + "</div>"); }, enabled: !component.get("v.isDrillDown") }, credits: { enabled: false }, series: columnDataList }); } Renderer:
({ afterRender: function(component, helper) { this.superAfterRender(); }, rerender: function(component, helper) { this.superRerender(); helper.drawChart(component, helper); } }) CSS: –
.THIS .highcharts-tooltip span .tooltip{ z-index:999999999 !important; border: 1px solid; background-color: white; padding:5px; border-radius: 4px; } Ten problem nie występuje, gdy usługa szafki jest wyłączona. Ale chcę, żeby to działało idealnie, gdy LS jest nieaktywne. Byłoby bardzo pomocne, gdyby ktokolwiek mógł przedstawić jakieś spostrzeżenia na ten temat.
Edycja: Zgodnie z Pawłem „sugestia Wyrenderowałem podpowiedź jako HTML (edytowałem powyższy kod inicjalizacji Highcharts). Etykietka jest renderowana w symulatorze urządzenia Chrome. Ale na iPadzie i iPhonie po kliknięciu wykresu generuje następujące błędy:
TypeError: null nie jest obiektem (ocena „e.call”)
TypeError: undefined nie jest obiektem (ocena „wykresów [H.hoverChartIndex] .mouseIsDown”)
Komentarze
- Może to być głupie pytanie, ale co by było, gdybyś użył css do utworzenia z-index 10000 lub czegoś dużego, aby wynieść go na pierwszy plan? Trochę hacky …
- Dzięki za sugestię @Eric. Ale niestety nie ' nie działa, ponieważ Highcharts renderuje podpowiedź i wykresy jako elementy svg. Więc myślę, że ' zmiana kolejności (która używa JS) była wymagana, aby przenieść to na pierwszy plan. Ten problem nie występuje również, gdy usługa Locker Service jest wyłączona. ' mam do czynienia z tym problemem, gdy usługa Locker Service jest aktywowana.
- Cześć @ PawełFus Ten problem został rozwiązany w najnowszej stabilnej wersji Highcharts, a także w Salesforce ' s Zima ' 17 Aktualizacja 12.1. Ponadto stary problem z błędem 16 wciąż pojawia się w najnowszej stabilnej wersji. salesforce.stackexchange.com/questions/147917/…
- Świetnie to słyszeć! Odnośnie problemu # 16 – komponent za każdym razem ładuje Highcharts. Highcharts powinny być załadowane tylko raz.
- Hi @ PawełFus Szybka aktualizacja, Highcharts Error # 16 jest obecny w przeglądarce Microsoft Edge na pulpicie Windows.