Question

我使用highcharts，并且tooltip图表中需要dataLabels和pie。
在dataLabels方向时我遇到RTL问题。

我使用此配置：

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的错误，我希望通过官方网站解决。

但现在我需要RTL模式下的数据标签，并在悬停时显示默认工具提示，也可点击以关注相关数据系列。
我该如何解决？！

Answer 1

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

在这种情况下，只需在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`

需要textShadow dataLabels和IE9 {}禁用EDGE：

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>',

highcharts dataLabels支持RTL，并将其悬停在show tooltip上

2 个答案: