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

可以为每个将触发 show/hide 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>',

Answer 2

我找到了一个简单的解决方案。

在这种情况下，只需在 dataLabels.

的文本中使用 RLE (Start of right-to-left embedding) 控制字符

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

但在 IE9 和 EDGE 浏览器中出现了两个错误。要解决这些问题，请执行以下解决方案。

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/

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

highcharts dataLabels support RTL with enable hover it for show tooltip

javascript

tooltip

highcharts

right-to-left