c# - RTL をサポートするハイチャート

Question

Highcharts はデフォルトで rtl をサポートしていません。ヘブライ語/アラビア語などの rtl テキストを配置すると、テキストが完全に破壊され、読めなくなることがあります。RTL をサポートするように HighCharts を構成するにはどうすればよいですか?

役立つ場合は dotnetHighCharts を使用しています...

Answer 1

このコードを試してください: デモ

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

私は、これが役立つかもしれないと思います：

• レジェンドRTL
• rtl のツールチップ useHTML

一般に、すべてのラベルなどに useHTML を使用することをお勧めします。

Answer 3

RLEテキスト内で (右から左への埋め込みの開始)制御文字を使用できます。次のようになります。

format: '\u202B' + '{point.name}'

サンプルコード:

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

});

完成したコードはオンラインでこちらを参照してください: https://jsfiddle.net/NabiKAZ/h4kv0t9v/4/