Me enfrento a un problema en el que la información sobre herramientas de Highcharts se superpone al gráfico en sí. Por favor, busque lo siguiente imagen que muestra lo mismo:
Cuando LS está activo:
Cuando LS está desactivado
(La escala de los dos gráficos es diferente porque «estoy configurando la altura dinámica para el gráfico usando $ (window) .height () que no ha sido corregido por Salesforce todavía cuando LS está activo).
Código:
Asistente:
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 }); } Renderizador:
({ 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; } Este problema no está presente cuando el servicio de casilleros está desactivado. Pero quiero que esto funcione perfectamente cuando LS esté desactivado. Sería muy útil si alguien pudiera proporcionar información sobre esto.
Editar: Según Pawel Como sugerencia, rendericé la información sobre herramientas como HTML (he editado el código de inicialización de Highcharts arriba). La información sobre herramientas se muestra en el simulador de dispositivos Chrome. Pero en iPad y iPhone, arroja los siguientes errores al hacer clic en el gráfico:
TypeError: null no es un objeto (evaluando «e.call»)
TypeError: undefined no es un objeto (evaluando «gráficos [H.hoverChartIndex] .mouseIsDown»)
Comentarios
- Puede ser una pregunta estúpida, pero ¿qué pasa si usas css para hacer el índice z de 10000 o algo grande para llevarlo al frente? Pequeño hacky …
- Gracias por la sugerencia @Eric. Pero desafortunadamente esto no ' t funciona ya que Highcharts representa la información sobre herramientas y los gráficos como elementos svg. Así que creo que es necesario ' reordenar (que usa JS) para llevarlo al frente. Además, este problema no está presente cuando el servicio de casillero está desactivado. ' me enfrento a este problema cuando se activa el servicio Locker.
- Hola @ PawełFus Este problema se ha solucionado en la última versión estable de Highcharts, así como en Salesforce ' s Winter ' 17 Parche 12.1. Además, el antiguo problema del error 16 sigue apareciendo en la última versión estable. salesforce.stackexchange.com/questions/147917/…
- ¡Qué bueno escuchar eso! Con respecto al problema n. ° 16, el componente cada vez que carga Highcharts. Highcharts debe cargarse solo una vez.
- Hola @ PawełFus Solo una actualización rápida, el error Highcharts # 16 está presente en el navegador Microsoft Edge en el escritorio de Windows.