ハイチャートツールチップがグラフ自体とオーバーラップするという問題に直面しています。以下を見つけてください。同じことを表す画像：

LSがアクティブな場合：

ハイチャートツールチップがグラフと重なる

LSが非アクティブ化されている場合

LSの場合ハイチャートは正常に機能しますアクティブではありません

（を使用してグラフの動的高さを設定しているため、2つのグラフの縮尺が異なります。 $（window）.height（）。LSがアクティブな場合、Salesforceによってまだ修正されていません。）

コード：

ヘルパー： 

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 }); }

レンダラー： 

({ 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; }

この問題は、ロッカーサービスが無効になっている場合は発生しません。しかし、LSが非アクティブ化されたときにこれが完全に機能することを望んでいます。誰かがこれに関する洞察を提供できれば非常に役立ちます。

編集： Pawelによる「私はツールチップをHTMLとしてレンダリングしたという提案です（上記のHighcharts初期化コードを編集しました）。ツールチップはChromeデバイスシミュレータでレンダリングされます。ただし、iPadとiPhoneでは、グラフをクリックすると次のエラーがスローされます。

TypeError：nullはオブジェクトではありません（「e.call」を評価）

TypeError：undefinedはオブジェクトではありません（ “charts [H.hoverChartIndex] .mouseIsDown”を評価しています）

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です