Jeg står over for et problem, hvor Highcharts-værktøjstip overlappes af selve grafen. Find følgende billede, der skildrer det samme:
Når LS er aktiv:
Når LS er deaktiveret
(Skalaen på de to grafer er forskellig, fordi jeg angiver dynamisk højde for diagrammet ved hjælp af $ (vindue) .højde (), som endnu ikke er rettet af Salesforce , når LS er aktiv.)
Kode:
Hjælper:
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; } Dette problem er ikke til stede, når skabeservice er deaktiveret. Men jeg ønsker, at dette skal fungere perfekt, når LS er deaktiveret. Det ville være meget nyttigt, hvis nogen kan give indsigt i dette.
Rediger: I henhold til Pawel “forslag Jeg gengav værktøjstip som HTML (jeg har redigeret Highcharts initialiseringskoden ovenfor). Værktøjstip gengives i Chrome-enhedsimulator. Men i iPad og iPhone kaster det følgende fejl ved at klikke på grafen:
TypeError: null er ikke et objekt (vurderer “e.call”)
TypeError: udefineret er ikke et objekt (vurderer “charts [H.hoverChartIndex] .mouseIsDown”)
Kommentarer
- Kan være et dumt spørgsmål, men hvad hvis du brugte css til at lave z-index 10000 eller noget stort for at bringe det til fronten ?? Lille hacky …
- Tak for forslaget @ Eric. Men desværre fungerer dette ikke ', da Highcharts gengiver værktøjstip og grafer som svg-elementer. Så jeg tror, at ' s ombestilling (som bruger JS) kræves for at bringe den til fronten. Dette problem er heller ikke til stede, når Locker Service er deaktiveret. Jeg ' står over for dette problem, når Locker Service er aktiveret.
- Hej @ PawełFus Dette problem er rettet i den seneste stabile version af Highcharts såvel som i Salesforce ' s Winter ' 17 12.1 patch. Det gamle problem med fejl 16 kommer også stadig i den seneste stabile version. salesforce.stackexchange.com/questions/147917/…
- Fantastisk at høre det! Hvad angår nummer 16 – komponent indlæser hver gang Highcharts. Highcharts skal indlæses kun én gang.
- Hej @ PawełFus Bare en hurtig opdatering, Highcharts Error # 16 er til stede i Microsoft Edge-browseren i Windows Desktop.