我如何在Chartjs中实现Yaxis的RTL

Question

目前我正在开发一个网站，我必须在标签和工具提示上对齐文本 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
            });

Answer 1

您可以在工具提示中使用 RTL 和其他设置，如下所示：

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

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

Answer 2

您可以使用 y 轴的位置选项来完成此操作：

let isRightToLeft = true;
chart.options = {
      scales: {
        y: {
          position: isRightToLeft ? 'right' : 'left',
        }
      }
    };