highcharts dataLabelsは、RTLを有効にしてRTLを表示して、ツールチップを表示します。

Question

highchartsを使用し、tooltipとdataLabelsをpieにする必要があります。
RTLの方向にあるとdataLabelsに問題があります。

私は、この設定を使用します。

plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     dataLabels: { 
      enabled: true, 
      style: { 
       fontSize: '15px', 
       fontFamily: 'tahoma', 
       direction: 'rtl', 
      }, 
     }, 
    }, 
}, 

結果は、あなたがこの画像で見ることができるバグがあります

は、オンラインで参照してください：研究としてhttps://jsfiddle.net/NabiKAZ/h4kv0t9v/

と公式提案をRTLモード対応、useHTML: true：

結果OKですが、データラベルは、表示ツールチップのマウスホバーをサポートしていません！ https://jsfiddle.net/NabiKAZ/h4kv0t9v/1/

をそして私は、remove direction: rtlでuseHTML: falseを試してみてください：

は、オンラインを参照してください。あなたがデフォルトLTRモードでデータラベルのショーを見るが、ショーのツールチップのサポートマウスホバーやクリック可能であるため

。 https://jsfiddle.net/NabiKAZ/h4kv0t9v/2/

確かにそれはhighchartsのバグだと私は公式サイトで、それを解決することを望む：

は、オンラインを参照してください。

しかし、私はRTLモードでデータラベルを必要とし、それをホバーするとデフォルトのツールチップを表示し、関連するデータシリーズにフォーカスするためにクリックすることもできます。
どうすれば解決できますか？

Answer 1

私は簡単な解決策を見つけます。

RLE (Start of right-to-left embedding)の制御文字をdataLabelsのテキストに使用するだけです。

plotOptions: { 
    pie: { 
     dataLabels: { 
      format: '\u202B' + '{point.name}', // \u202B is RLE char for RTL support 

しかしIE9とEDGEのブラウザで2つのバグが表示されます。これらを解決するには、以下の解決策を実行します。

IE9とEDGEのためのタイトルでこれを必要とする：

title: { 
    useHTML: true, //bug fixed `IE9` and `EDGE` 

はIE9とEDGEためdataLabelsのtextShadowを無効にする必要がある：

plotOptions: { 
    pie: { 
     dataLabels: { 
      style: { 
       textShadow: false, //bug fixed IE9 and EDGE 

完成したコードは、ここでは、オンラインで参照してください。https://jsfiddle.net/NabiKAZ/h4kv0t9v/4/

Answer 2

Highchartsツールチップの表示/非表示をトリガーするラベルごとに、onmouseoverとonmouseleaveのイベントを追加することができます。コードはdataLabel形式で追加できます。 （your demoからのコードに基づいて）例：https://jsfiddle.net/1czhyo92/

format: '<span onmouseover="$(\'#container\').highcharts().tooltip.refresh($(\'#container\').highcharts().series[0].points[{point.x}])" onmouseleave="$(\'#container\').highcharts().tooltip.hide()">{point.name}</span>',