Je « suis confronté à un problème où linfo-bulle Highcharts est superposée par le graphique lui-même. Veuillez trouver ce qui suit image qui représente la même chose:
Lorsque LS est actif:
Lorsque LS est désactivé
(Léchelle des deux graphiques est différente car je « m règle la hauteur dynamique du graphique en utilisant $ (window) .height () qui na pas encore été corrigé par Salesforce lorsque LS est actif.)
Code:
Aide:
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; } Ce problème nest pas présent lorsque le service de casier est désactivé. Mais je veux que cela fonctionne parfaitement lorsque LS est désactivé. Il serait très utile que quelquun puisse fournir des informations à ce sujet.
Modifier: Selon Pawel « Suggestion » Jai rendu linfo-bulle au format HTML (jai modifié le code dinitialisation Highcharts ci-dessus). Linfo-bulle saffiche dans le simulateur dappareil Chrome. Mais sur iPad et iPhone, cela génère les erreurs suivantes en cliquant sur le graphique:
TypeError: null nest pas un objet (évaluation de « e.call »)
TypeError: undefined nest pas un objet (évaluation de « charts [H.hoverChartIndex] .mouseIsDown »)
Commentaires
- Peut-être une question stupide mais que se passerait-il si vous utilisiez css pour rendre le z-index 10000 ou quelque chose de grand pour le mettre au premier plan ?? Petit hacky …
- Merci pour la suggestion @Eric. Mais malheureusement, cela ne fonctionne pas ' car Highcharts rend linfo-bulle et les graphiques sous forme déléments svg. Je pense donc que la réorganisation de ' (qui utilise JS) est nécessaire pour la mettre au premier plan. En outre, ce problème nest pas présent lorsque le service de casier est désactivé. Je ' rencontre ce problème lorsque Locker Service est activé.
- Bonjour @ PawełFus Ce problème a été corrigé dans la dernière version stable de Highcharts ainsi que dans Salesforce ' s Winter ' 17 Patch 12.1. En outre, lancien problème de lerreur 16 est toujours à venir dans la dernière version stable. salesforce.stackexchange.com/questions/147917/…
- Cest génial dentendre ça! Concernant le problème n ° 16 – le composant charge à chaque fois Highcharts. Les Highcharts ne doivent être chargés quune seule fois.
- Salut @ PawełFus Juste une petite mise à jour, Highcharts Error # 16 est présent dans le navigateur Microsoft Edge dans Windows Desktop.