如何在Chartjs中为Yaxis实现RTL

qyswt5oh 于 2024-01-07 发布在 Chart.js

关注(0)|答案(2)|浏览(255)

目前，我在一个网站上工作，我必须对齐标签和工具提示，因为它的阿拉伯文文本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
            });

字符串

chart.js

来源：https://stackoverflow.com/questions/59280155/how-can-i-implement-rtl-for-yaxis-in-chartjs

2条答案

按热度按时间

64jmpszr1#

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

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

字符串
我已经用它为波斯图表和工作正确。

赞(0）回复(0）举报 2024-01-07

ep6jt1vc2#

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

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

字符串

赞(0）回复(0）举报 2024-01-07

我来回答

如何在Chartjs中为Yaxis实现RTL

2条答案

相关问题

热门标签

最新问答