如何在Chartjs中为Yaxis实现RTL

时间:2019-12-11 06:44:28

标签: chart.js right-to-left

目前,我正在一个网站上工作,该网站必须将标签和工具提示上的文本RTL对齐,因为它是阿拉伯语。

我已阅读文档并进行了大量搜索,但无法理解为什么RTL不能用于工具提示和标签

查看屏幕截图: 标签:https://prnt.sc/q95lf8 工具提示:https://prnt.sc/q95mbz

这是我的下面的代码:

config.options.scales.xAxes =[ {
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: utils.getTranslations('average_complaints_for_1000', 'statistics'),
                            fontStyle: 'bold',
                            fontSize: (window.innerWidth<400)? 13 : 20,
                            align   : 'right',
                        },
                    }];     
                config.options.scales.yAxes[0].display=true;
                config.options.scales.yAxes[0].ticks={
                    fontSize: (window.innerWidth<400)? 13 :14 ,
                    fontFamily:'DroidKufi-Regular',
                };

                config.options.tooltips.enabled = true;

            this.generate_chart({
                container: '#bank_rate_of_complaints--section-1',
                canvas_id: 'bank_rate_of_complaints_canvas_1',
                chart_config: config,
                canvas_height: (data_set.labels.length < 6)? 70 : (data_set.labels > 5 && data_set.labels.length< 10 )? 190 : 300
            });

1 个答案:

答案 0 :(得分:0)

您可以在如下所示的工具提示中使用rtl和其他设置:

options = {
tooltips: {
  rtl: true,
  bodyFontSize: 10,
  titleFontSize: 11,
}}

我已将其用于波斯图表并正常工作。