Sto affrontando un problema in cui il suggerimento di Highcharts viene sovrapposto al grafico stesso. Trova quanto segue immagine che raffigura lo stesso:
Quando LS è attivo:
Quando LS è disattivato
(La scala dei due grafici è diversa perché “sto impostando laltezza dinamica per il grafico utilizzando $ (window) .height () che non è stato ancora corretto da Salesforce quando LS è attivo.)
Codice:
Assistente:
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; } Questo problema non è presente quando il servizio di armadietto è disattivato. Ma voglio che funzioni perfettamente quando LS è disattivato. Sarebbe molto utile se qualcuno potesse fornire approfondimenti in merito.
Modifica: Secondo Pawel Suggerimento: ho reso il tooltip in HTML (ho modificato il codice di inizializzazione di Highcharts sopra). La descrizione comando viene visualizzata nel simulatore di dispositivo Chrome. Ma in iPad e iPhone, genera i seguenti errori quando si fa clic sul grafico:
TypeError: null non è un oggetto (valutazione di “e.call”)
TypeError: undefined non è un oggetto (valutazione di “charts [H.hoverChartIndex] .mouseIsDown”)
Commenti
- Potrebbe essere una domanda stupida, ma cosa succederebbe se usassi css per creare lo z-index 10000 o qualcosa di grande per portarlo in primo piano ?? Piccolo hacky …
- Grazie per il suggerimento @Eric. Ma sfortunatamente questo ' t funziona poiché Highcharts rende il tooltip e i grafici come elementi svg. Quindi penso che ci sia ' riordino (che utilizza JS) necessario per portarlo in primo piano. Inoltre, questo problema non è presente quando il servizio Locker è disattivato. ' sto affrontando questo problema quando il servizio Locker è attivato.
- Ciao @ PawełFus Questo problema è stato risolto nellultima versione stabile di Highcharts e in Salesforce ' s Winter ' 17 12.1 patch. Inoltre, il vecchio problema dellerrore 16 è ancora in arrivo nellultima versione stabile. salesforce.stackexchange.com/questions/147917/…
- Fantastico! Riguardo al problema # 16 – il componente ogni volta che carica Highcharts. Highcharts dovrebbe essere caricato solo una volta.
- Ciao @ PawełFus Solo un rapido aggiornamento, Highcharts Error # 16 è presente nel browser Microsoft Edge in Windows Desktop.