Javascript 如何在amCharts中设置RTL？

我使用amCharts在项目中添加图表

我需要右页的战略图

我需要转换到RTL版本

如何RTL这个图表

我的代码是：

CSS代码：

<!-- Styles -->
<style>
#chartdiv {
width       : 100%;
height      : 500px;
font-size   : 11px;
}                   
</style>

#沙特迪夫{
宽度：100%；
高度：500px；
字体大小：11px；
}                   

脚本代码为：

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js">    
</script>


<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<!-- Chart code -->


<script>
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [ {
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Netherlands",
    "visits": 665
  }, {
    "country": "Russia",
    "visits": 580
  }, {
    "country": "South Korea",
    "visits": 443
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  } ],
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
        "tickLength": 20
  },
  "export": {
    "enabled": true
  }

} );
</script>

var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“串行”，
“主题”：“光”，
“数据提供者”：[{
“国家”：“美国”，
“访问”：2025年
}, {
“国家”：“中国”，
“访问”：1882年
}, {
“国家”：“日本”，
“访问”：1809
}, {
“国家”：“德国”，
“访问”：1322
}, {
“国家”：“英国”，
“访问”：1122
}, {
“国家”：“法国”，
“访问”：1114
}, {
“国家”：“印度”，
“访问”：984
}, {
“国家”：“西班牙”，
“访问”：711
}, {
“国家”：“荷兰”，
“访问”：665
}, {
“国家”：“俄罗斯”，
“访问”：580
}, {
“国家”：“韩国”，
“访问”：443
}, {
“国家”：“加拿大”，
“访问”：441
}, {
“国家”：“巴西”，
“访问”：395
} ],
“valueAxes”：[{
“gridColor”：“#FFFFFF”，
“gridAlpha”：0.2，
“dashLength”：0
} ],
“网格图”：没错，
“起始持续时间”：1，
“图表”：[{
“文本”：“[[category]]：[[value]]”，
“填充字母”：0.8，
“lineAlpha”：0.2，
“类型”：“列”，
“valueField”：“访问”
} ],
“图表光标”：{
“CategoryBallooneEnabled”：false，
“cursorAlpha”：0，
“可缩放”：错误
},
“类别字段”：“国家”，
“分类法”：{
“网格位置”：“开始”，
“gridAlpha”：0，
“滴答声位置”：“开始”，
“滴答声长度”：20
},
“出口”：{
“已启用”：真
}
} );

HTML中的代码是：

<div id="chartdiv"></div>   

---

这取决于设置RTL的意思

如果希望图表支持RTL语言，并且代码中有RTL标题，可以设置

AmCharts.RTL=true在执行任何图表代码之前，以使其正确处理文本

如果您只是想将图表轴和数据从右向左重新定向，则必须手动执行此操作。您可以将值轴设置为“右”

，以移动值轴。要使数据从右侧开始，必须反转数据提供程序。一种简单的方法是在

AmCharts.makeChart

调用中添加数据提供程序数组

演示：

var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“串行”，
“主题”：“光”，
“数据提供者”：[{
“国家”：“美国”，
“访问”：2025年
}, {
“国家”：“中国”，
“访问”：1882年
}, {
“国家”：“日本”，
“访问”：1809
}, {
“国家”：“德国”，
“访问”：1322
}, {
“国家”：“英国”，
“访问”：1122
}, {
“国家”：“法国”，
“访问”：1114
}, {
“国家”：“印度”，
“访问”：984
}, {
“国家”：“西班牙”，
“访问”：711
}, {
“国家”：“荷兰”，
“访问”：665
}, {
“国家”：“俄罗斯”，
“访问”：580
}, {
“国家”：“韩国”，
“访问”：443
}, {
“国家”：“加拿大”，
“访问”：441
}, {
“国家”：“巴西”，
“访问”：395
}].reverse（），
“valueAxes”：[{
“gridColor”：“#FFFFFF”，
“gridAlpha”：0.2，
“dashLength”：0，
“位置”：“正确”
} ],
“网格图”：没错，
“起始持续时间”：1，
“图表”：[{
“文本”：“[[category]]：[[value]]”，
“填充字母”：0.8，
“lineAlpha”：0.2，
“类型”：“列”，
“valueField”：“访问”
} ],
“图表光标”：{
“CategoryBallooneEnabled”：false，
“cursorAlpha”：0，
“可缩放”：错误
},
“类别字段”：“国家”，
“分类法”：{
“网格位置”：“开始”，
“gridAlpha”：0，
“滴答声位置”：“开始”，
“滴答声长度”：20
},
“出口”：{
“已启用”：真
}
} );
#chartdiv{
宽度：100%；
高度：500px；
字体大小：11px；
}
Its chart.rtl=true；检查RTL的amcharts文件