HighCharts для поддержки RTL

Highcharts не поддерживает RTL по умолчанию. При размещении текстов RTL, таких как иврит / арабский, текст полностью уничтожается, что иногда делает его нечитаемым. Как настроить HighCharts для поддержки RTL?

Я использую dotnetHighCharts, если это помогает ...


c# right-to-left highcharts dotnethighcharts
person Michael Blok    schedule 19.02.2013    source источник

Ответы (7)


arrow_upward
14
arrow_downward

попробуйте этот код: Демо

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]

}]});
person Samira    schedule 17.12.2014

arrow_upward
12
arrow_downward

Просто добавьте useHTML: true к параметрам построения вашей диаграммы. См. Демонстрацию здесь jsfiddle.net/3me9h7k2

or

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

});

person Muhammad Yasir    schedule 22.05.2017

arrow_upward
5
arrow_downward

Думаю, это может быть полезно:

В общем, рекомендуется использовать HTML для всех этикеток и т. Д.

person Paweł Fus    schedule 19.02.2013

arrow_upward
3
arrow_downward

Вы можете использовать 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/

person Nabi K.A.Z.    schedule 26.05.2016
comment
в вашем примере не отображается текст ярлыка, кроме заголовка. У меня такая же проблема, но я не знаю, как ее устранить ... jsfiddle.net/NabiKAZ/h4kv0t9v/4 - person Muhammad Yasir; 20.05.2017
comment
@MuhammadYasir кажется, что эта проблема только на хроме. Я работаю над этим. - person Nabi K.A.Z.; 21.05.2017
comment
какое-то тело сделало для вас .. пожалуйста, проверьте это .. Просто добавьте useHTML: true, чтобы отобразить параметры вашей диаграммы jsfiddle.net / 3me9h7k2 - person Muhammad Yasir; 22.05.2017
comment
@MuhammadYasir использует useHTML: true появляется еще одна проблема, которую вы можете увидеть здесь: слои aplud.com/ja9ak на других слоях. - person Nabi K.A.Z.; 23.05.2017

arrow_upward
0
arrow_downward

вы можете установить направление ltr

Образец:

<div id="container" style="direction: ltr"></div>
person mm33    schedule 08.02.2017

arrow_upward
0
arrow_downward

В опциях есть свойство: "useHtml": true, и если вам нужно в заголовке, вы можете добавить стиль: {direction: rtl}, это работает!

person Racheli Frish    schedule 06.05.2020

arrow_upward
0
arrow_downward

Только

title: {
    text: 'یک نمودار؟!',
    useHTML: true,
},
legend: {
    rtl: true,
},

сделает всю работу за вас.

person Amir Rezvani    schedule 28.07.2020