Highcharts不以阿拉伯语显示饼图的数据标签

问题描述

我正在使用Highcharts，我在阿拉伯语的Pie Charts中遇到问题。它的英文工作很好。
我试过rtl&但它不工作。

var chart = new Highcharts.Chart（{
图：{
renderTo：'container'，
type：'pie'
}，

  title：{
 text：'یکنمودار?!'，
 useHTML：true，//错误修正了IE9和EDGE 
 style：{
 fontSize：'20px'，
 fontFamily：'tahoma'，
 direction：'rtl '，
}，
}，
 
工具提示：{
 useHTML：true，
 style：{
 fontSize：'20px'， 
 fontFamily：'tahoma'，
方向：'rtl'，
}，
}，
 
 plotOptions：{
 pie：{ 
 allowPointSelect：true，
 cursor：'pointer'，
 dataLabels：{
启用：true，
y：-5，//可选
格式： '\\\‫'+'{point.name}'，// \\\‫是RTL支持的RLE char 
 style：{
 fontSize： 15px'，
 fontFamily：'tahoma'，
 textShadow：false，//错误修正IE9和EDGE 
}，
}，
}，
 }，
 
系列：[{
 name：'برند'，
 colorByPoint：true，
 data：[{
 name：'الحجمالفعلي' ，
y：56.33 
}，{
名称：'خرسانةجاهزة'，
y：24.03，
}，{
名称：'خرسانةجاهزة'， 
y：10.38 
}，{
 name：'سفاری?!'，
y：4.77 
}，{
 name：'اوپرا?!'， 
y：0.91 
}，{
 name：'دیگر?!'，
y：0.2 
}]，
}]，
  

}）;

示例在这里

解决在 plotOption 中添加 useHTML：true，

<$ p
pie：{
allowPointSelect：true，
cursor：'pointer'，
dataLabels：{
enabled： true，
y：-5，//可选
格式：'\\\‫'+'{point.name}'，// \\\‫是用于RTL支持的RLE char
style： {
fontSize：'15px'，
fontFamily：'tahoma'，
textShadow：false，//错误修正了IE9和EDGE
}，
useHTML：true，
}，
// showInLegend：true，
}，
}，

I am using Highcharts, I am facing a problem in Pie Charts for Arabic. Its working fine for English.I tried rtl & ltr but its not working.

var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' },

title: {
    text: 'یک نمودار؟!',
    useHTML: true, //bug fixed `IE9` and `EDGE`
    style: {
        fontSize: '20px',
        fontFamily: 'tahoma',
        direction: 'rtl',
    },
},

tooltip: {
    useHTML: true,
    style: {
        fontSize: '20px',
        fontFamily: 'tahoma',
        direction: 'rtl',
    },
},

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            y: -5, //Optional
            format: '\u202B' + '{point.name}', // \u202B is RLE char for RTL support
            style: {
                fontSize: '15px',
                fontFamily: 'tahoma',
                textShadow: false, //bug fixed IE9 and EDGE
            },
        },
    },
},

series: [{
    name: 'برند',
    colorByPoint: true,
    data: [{
        name: 'الحجم الفعلي',
        y: 56.33
    }, {
        name: 'خرسانة جاهزة',
        y: 24.03,
    }, {
        name: 'خرسانة جاهزة',
        y: 10.38
    }, {
        name: 'سفاری؟!',
        y: 4.77
    }, {
        name: 'اوپرا؟!',
        y: 0.91
    }, {
        name: 'دیگر؟!',
        y: 0.2
    }],
}],

});

Example is here https://jsfiddle.net/NabiKAZ/h4kv0t9v/4/

解决方案

In plotOption add useHTML: true,

Forked Fiddle

    plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            y: -5, //Optional
            format: '\u202B' + '{point.name}', // \u202B is RLE char for RTL support
            style: {
                fontSize: '15px',
                fontFamily: 'tahoma',
                textShadow: false, //bug fixed IE9 and EDGE
            },
            useHTML: true,
        },
        //showInLegend: true,
    },
},

这篇关于Highcharts不以阿拉伯语显示饼图的数据标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！