HighCharts zur Unterstützung von RTL

Question

Highcharts unterstützt rtl nicht als Standard. Bei der Eingabe von rtl-Texten wie hebräisch/arabisch wird der Text komplett zerstört und ist daher manchmal nicht lesbar. Wie konfiguriere ich HighCharts zur Unterstützung von RTL?

ich die dotnetHighCharts verwende, wenn es hilft ...

Answer 1

Ich denke, kann dies hilfreich sein:

• legend rtl
• tooltip useHTML for rtl

Im Allgemeinen useHTML für alle Etiketten usw. wird empfohlen.

Answer 2

versuchen diesen Code: 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 3

Sie ein RLE (Start of right-to-left embedding) Steuerzeichen in Text verwenden können. sein wie folgt aus:

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

Beispielcode:

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

}); 

Completed Code in hier online sehen: https://jsfiddle.net/NabiKAZ/h4kv0t9v/4/

Answer 4

Sie Richtung ltr

Probe einstellen:

<div id="container" style="direction: ltr"></div> 

Answer 5

Fügen Sie einfach useHTML: true hinzu, um die Optionen Ihres Diagramms zu plotten. Siehe Demo hier jsfiddle.net/3me9h7k2

oder

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

});