Ik heb een probleem waarbij Highcharts-tooltip wordt overlapt door de grafiek zelf. Gelieve het volgende te vinden afbeelding die hetzelfde weergeeft:
Wanneer LS actief is:
Wanneer LS is gedeactiveerd
(De schaal van de twee grafieken is verschillend omdat ik “de dynamische hoogte voor de grafiek instel met $ (window) .height () die “nog niet is opgelost door Salesforce wanneer LS actief is.)
Code:
Helper:
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; } Dit probleem doet zich niet voor wanneer de lockerservice is gedeactiveerd. Maar ik wil dat dit perfect werkt als LS is gedeactiveerd. Het zou erg handig zijn als iemand hier enig inzicht in kan geven.
Bewerken: Volgens Pawel De suggestie dat ik de tooltip heb weergegeven als HTML (ik heb de initialisatiecode van Highcharts hierboven bewerkt). De knopinfo wordt weergegeven in de Chrome-apparaatsimulator. Maar op iPad en iPhone genereert het de volgende fouten bij het klikken op de grafiek:
TypeError: null is geen object (evalueert “e.call”)
TypeError: undefined is geen object (evalueert “charts [H.hoverChartIndex] .mouseIsDown”)
Reacties
- Misschien een domme vraag, maar wat als je css zou gebruiken om de z-index 10000 te maken of iets groots om het naar voren te brengen? Beetje hacky …
- Bedankt voor de suggestie @Eric. Maar helaas werkt dit niet ' omdat Highcharts de tooltip en grafieken weergeeft als svg-elementen. Dus ik denk dat er ' s herschikking (die JS gebruikt) nodig is om het naar voren te brengen. Dit probleem is ook niet aanwezig wanneer Locker Service is gedeactiveerd. Ik ' m geconfronteerd met dit probleem wanneer Locker Service is geactiveerd.
- Hallo @ PawełFus Dit probleem is opgelost in de laatste stabiele versie van de Highcharts en in Salesforce ' s Winter ' 17 12.1-patch. Ook komt het oude probleem van fout 16 nog steeds naar voren in de nieuwste stabiele versie. salesforce.stackexchange.com/questions/147917/…
- Geweldig om dat te horen! Met betrekking tot nummer 16 – component laadt elke keer Highcharts. Highcharts hoeft maar één keer te worden geladen.
- Hallo @ PawełFus Gewoon een snelle update, Highcharts Error # 16 is aanwezig in de Microsoft Edge-browser in Windows Desktop.