Ich habe ein Problem, bei dem die Highcharts-Tooltips von der Grafik selbst überlappt werden Bild, das dasselbe darstellt:
Wenn LS aktiv ist:
Wenn LS deaktiviert ist
(Der Maßstab der beiden Diagramme ist unterschiedlich, da ich die dynamische Höhe für das Diagramm mit einstelle $ (window) .height (), das von Salesforce noch nicht behoben wurde , wenn LS aktiv ist.)
Code:
Helfer:
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; } Dieses Problem tritt nicht auf, wenn der Schließfachdienst deaktiviert ist. Aber ich möchte, dass dies perfekt funktioniert, wenn LS deaktiviert ist. Es wäre sehr hilfreich, wenn jemand diesbezügliche Erkenntnisse liefern könnte.
Bearbeiten: Gemäß Pawel „s Vorschlag Ich habe den Tooltip als HTML gerendert (ich habe den Highcharts-Initialisierungscode oben bearbeitet). Der Tooltip wird im Chrome-Gerätesimulator gerendert. Bei iPad und iPhone werden beim Klicken auf das Diagramm jedoch die folgenden Fehler ausgegeben:
TypeError: null ist kein Objekt (Auswertung von „e.call“)
TypeError: undefined ist kein Objekt (Auswertung von „Charts [H.hoverChartIndex] .mouseIsDown“)
Kommentare
- Mag eine dumme Frage sein, aber was ist, wenn Sie CSS verwendet haben, um den Z-Index 10000 zu erstellen, oder etwas Großes, um ihn nach vorne zu bringen? Little hacky …
- Danke für den Vorschlag @Eric. Leider funktioniert dies ' nicht, da Highcharts den Tooltip und die Grafiken als SVG-Elemente rendert. Ich denke also, dass ' eine Neuordnung (die JS verwendet) erforderlich ist, um sie nach vorne zu bringen. Dieses Problem tritt auch nicht auf, wenn der Schließfachdienst deaktiviert ist. Ich ' habe dieses Problem, wenn der Schließfachdienst aktiviert ist.
- Hi @ PawełFus Dieses Problem wurde sowohl in der neuesten stabilen Version der Highcharts als auch in behoben Salesforce ' s Winter ' 17 12.1 Patch. Außerdem tritt das alte Problem von Fehler 16 in der neuesten stabilen Version immer noch auf. salesforce.stackexchange.com/questions/147917/…
- Schön, das zu hören! In Bezug auf Problem Nr. 16 – Komponente jedes Mal, wenn Highcharts geladen werden. Highcharts sollten nur einmal geladen werden.
- Hi @ PawełFus Nur ein kurzes Update, Highcharts-Fehler Nr. 16 ist im Microsoft Edge-Browser in Windows Desktop vorhanden.