我使用 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
模式下的数据标签,悬停时显示默认工具提示,还可以点击以关注相关数据系列。
我该如何解决?!
最佳答案
我找到了一个简单的解决方案。
在这种情况下,只需使用 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/
关于javascript - highcharts dataLabels 支持 RTL 并启用悬停以显示工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37380116/