Estou enfrentando um problema em que a dica de ferramenta Highcharts está sendo sobreposta pelo próprio gráfico. Encontre o seguinte imagem que retrata o mesmo:
Quando o LS está ativo:
Quando o LS está desativado
(A escala dos dois gráficos é diferente porque estou definindo a altura dinâmica do gráfico usando $ (window) .height () que ainda não foi corrigido pelo Salesforce quando o LS está ativo.)
Código:
Helper:
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 não está presente quando o serviço de bloqueio é desativado. Mas eu quero que isso funcione perfeitamente quando o LS for desativado. Seria muito útil se alguém pudesse fornecer informações sobre isso.
Editar: Conforme Pawel Sugestão: renderizei a dica de ferramenta como HTML (editei o código de inicialização do Highcharts acima). A dica de ferramenta é renderizada no simulador de dispositivo Chrome. Mas no iPad e no iPhone, ele gera os seguintes erros ao clicar no gráfico:
TypeError: null não é um objeto (avaliando “e.call”)
TypeError: undefined não é um objeto (avaliando “charts [H.hoverChartIndex] .mouseIsDown”)
Comentários
- Pode ser uma pergunta estúpida, mas e se você usasse css para fazer o z-index 10000 ou algo grande para trazê-lo para a frente? Pequeno hacky …
- Obrigado pela sugestão @Eric. Mas, infelizmente, isso não ' não funciona, pois os Highcharts renderizam a dica de ferramenta e os gráficos como elementos svg. Portanto, acho que há ' s reordenamento (que é usar JS) necessário para trazê-lo para o início. Além disso, esse problema não está presente quando o Locker Service está desativado. Eu ' estou enfrentando esse problema quando o Locker Service é ativado.
- Olá @ PawełFus. Esse problema foi corrigido na última versão estável do Highcharts, bem como em Salesforce ' s Winter ' 17 12.1 patch. Além disso, o antigo problema do erro 16 ainda está aparecendo na última versão estável. salesforce.stackexchange.com/questions/147917/…
- Ótimo ouvir isso! Em relação ao item 16 – o componente sempre carrega Highcharts. Highcharts devem ser carregados apenas uma vez.
- Olá @ PawełFus. Apenas uma atualização rápida, Highcharts Error # 16 está presente no navegador Microsoft Edge no Windows Desktop.