HighCharts支持RTL

Question

Highcharts不支持rtl默认.当放置像希伯来语/阿拉伯语这样的rtl文本时,文本被完全破坏,使其有时难以理解.如何配置HighCharts以支持RTL？

我使用dotnetHighCharts如果它有帮助...

Answer 1

试试这段代码: Demo

var chart = new Highcharts.Chart({

chart: {
    style:{
    direction: 'rtl'
    },
    renderTo: 'container',
    type: 'column'
},

xAxis: {
    categories: [
         ' ??? a', 
        '???', 
        '????', 
        '?????'
    ],
    reversed: true
},

yAxis: {

    labels: {
         useHTML: true,
            format: '{value} ??? ????'
        },
    title: {
        text: '????? ?????',
        useHTML: true
    },
},
title: {
    text: '??? a',
   useHTML: true
},

legend: {
    useHTML: true
},    

tooltip: {
   useHTML: true

},

series: [{
    name: '???',
    data: [10000,30000,20000,40000]

}]});

Answer 2

只需添加useHTML: true到图表的绘图选项即可.请参阅演示jsfiddle.net/3me9h7k2

要么

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
            },
            useHTML: true,
        },
        //showInLegend: true,
    },
},

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
    }],
}],

});

Answer 3

我想,这可能会有所帮助:

• 传说rtl
• 工具提示useHTML for rtl

通常,建议对所有标签等使用HTML.