Highcharts默认不支持RTL。当放置希伯来语/阿拉伯语等RTL文本时,文本会被完全破坏,有时会变得难以阅读。如何配置HighCharts以支持RTL?
如果有用到dotnetHighCharts,可以这样做...
Highcharts默认不支持RTL。当放置希伯来语/阿拉伯语等RTL文本时,文本会被完全破坏,有时会变得难以阅读。如何配置HighCharts以支持RTL?
如果有用到dotnetHighCharts,可以这样做...
尝试这段代码: 演示
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]
}]});
只需在图表选项中添加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
}],
}],
});
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/
你可以设置方向为从左到右
示例:
<div id="container" style="direction: ltr"></div>
只有
title: {
text: 'یک نمودار؟!',
useHTML: true,
},
legend: {
rtl: true,
},
将为您完成工作。
useHTML: true
出现了另一个问题,您可以在这里查看:http://aplud.com/ja9ak 在另一层上添加了图层。 - Nabi K.A.Z.