javascript - highcharts dataLabels 支持 RTL 并启用悬停以显示工具提示

Question

我使用 highcharts ，并且需要pie图表中的tooltip和dataLabels。
我在 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:

结果正常，但数据标签不支持鼠标悬停显示工具提示!

在线查看:https://jsfiddle.net/NabiKAZ/h4kv0t9v/1/

然后我尝试使用 useHTML: false 删除 direction: rtl:

如您所见，数据标签在默认 LTR 模式下显示，但支持鼠标悬停和可单击以显示工具提示。

在线查看:https://jsfiddle.net/NabiKAZ/h4kv0t9v/2/

确定是highcharts的bug，希望官网能解决。

但现在我需要 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 浏览器中出现了两个bug。为了解决这些问题，请执行以下解决方案。

在 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/