Jag står inför ett problem där Highcharts verktygstips överlappar varandra i själva diagrammet. Vänligen hitta följande bild som visar samma:
När LS är aktiv:
När LS är avaktiverad
(Skalan för de två graferna är olika eftersom jag ställer in dynamisk höjd för diagrammet med $ (fönster) .höjd () som inte har fixats av Salesforce ännu när LS är aktiv.)
Kod:
Hjälpare:
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; } Det här problemet finns inte när skåpstjänsten är avaktiverad. Men jag vill att detta ska fungera perfekt när LS är avaktiverad. Det skulle vara till stor hjälp om någon kan ge några insikter om detta.
Redigera: Enligt Pawel ”s förslag Jag återgav verktygstipsen som HTML (jag har redigerat Highcharts initialiseringskoden ovan). Verktygstipsen görs i Chrome-enhetssimulator. Men på iPad och iPhone kastar det följande fel när du klickar på diagrammet:
TypeError: null är inte ett objekt (utvärderar ”e.call”)
TypeError: undefined är inte ett objekt (utvärderar ”diagram [H.hoverChartIndex] .mouseIsDown”)
Kommentarer
- Kan vara en dum fråga men vad händer om du använde css för att göra z-index 10000 eller något stort för att få det framåt ?? Lite hacky …
- Tack för förslaget @ Eric. Men tyvärr fungerar det inte ' eftersom Highcharts återger verktygstips och grafer som svg-element. Så jag tror att ' s omordning (som använder JS) krävs för att ta den fram. Det här problemet är inte heller när Locker Service är avaktiverat. Jag ' står inför detta problem när Locker Service är aktiverat.
- Hej @ PawełFus Det här problemet har åtgärdats i den senaste stabila versionen av Highcharts samt i Salesforce ' s Winter ' 17 12.1 patch. Den gamla frågan om fel 16 kommer också fortfarande i den senaste stabila versionen. salesforce.stackexchange.com/questions/147917/…
- Bra att höra det! När det gäller nummer 16 – komponenten laddar varje gång Highcharts. Highcharts ska laddas en gång.
- Hej @ PawełFus Bara en snabb uppdatering, Highcharts Error # 16 finns i Microsoft Edge-webbläsaren i Windows Desktop.