Jeg står overfor et problem der verktøytips for Highcharts overlappes av selve grafen. Finn følgende bilde som viser det samme:
Når LS er aktiv:
Når LS er deaktivert
(Skalaen til de to grafene er forskjellig fordi jeg angir dynamisk høyde for diagrammet ved hjelp av $ (vindu) .høyde () som ikke er løst av Salesforce ennå når LS er aktiv.)
Kode:
Hjelper:
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 problemet er ikke til stede når skapstjenesten er deaktivert. Men jeg vil at dette skal fungere perfekt når LS er deaktivert. Det ville være veldig nyttig hvis noen kan gi innsikt i dette.
Rediger: I henhold til Pawel «forslag jeg gjengitt verktøytipsen som HTML (jeg har redigert Highcharts initialiseringskoden ovenfor). Verktøytipset gjengis i Chrome-enhetssimulator. Men på iPad og iPhone kaster det følgende feil når du klikker på grafen:
TypeError: null er ikke et objekt (vurderer «e.call»)
TypeError: udefinert er ikke et objekt (evaluerer «charts [H.hoverChartIndex] .mouseIsDown»)
Kommentarer
- Kan være et dumt spørsmål, men hva om du brukte css til å lage z-indeksen 10000 eller noe stort for å bringe den til fronten ?? Lite hacky …
- Takk for forslaget @ Eric. Men dessverre fungerer ikke dette ' da Highcharts gjengir verktøytips og grafer som svg-elementer. Så jeg tror det ' s ombestilling (som bruker JS) kreves for å bringe den til fronten. Dette problemet er ikke tilstede når Locker Service er deaktivert. Jeg ' står overfor dette problemet når Locker Service er aktivert.
- Hei @ PawełFus Dette problemet er løst i den siste stabile versjonen av Highcharts så vel som i Salesforce ' s Winter ' 17 12.1 patch. Også den gamle utgaven av feil 16 kommer fortsatt i den siste stabile versjonen. salesforce.stackexchange.com/questions/147917/…
- Flott å høre det! Når det gjelder nummer 16 – laster komponenten hver gang Highcharts. Highcharts skal lastes inn bare én gang.
- Hei @ PawełFus Bare en rask oppdatering, Highcharts Error # 16 er tilstede i Microsoft Edge-nettleseren i Windows Desktop.