如何解决WordPress中Chart.js图表阿拉伯语显示的两大问题？

针对你遇到的两个问题，以下是具体的解决方案：

1. 将数字转换为阿联酋阿拉伯数字格式 #

Chart.js默认使用英文数字格式，需要通过坐标轴刻度的回调函数，利用Intl.NumberFormat将数字转换为阿拉伯-印度数字（阿联酋地区标准）。修改图表配置中的scales选项，对y轴（价格轴）的刻度进行格式化：

options: {
  // ... 原有配置
  scales: {
    y: {
      ticks: {
        callback: function(value) {
          // 转换为阿联酋阿拉伯数字
          return new Intl.NumberFormat('ar-AE').format(value);
        }
      }
    }
  },
  // ... 其他配置
}

如果需要x轴日期也显示为阿拉伯语格式，可在x轴的ticks.callback中添加日期格式化逻辑：

x: {
  ticks: {
    callback: function(value) {
      return new Date(value).toLocaleDateString('ar-AE', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      });
    }
  }
}

2. 启用全局RTL布局 #

仅设置图例的rtl: true无法实现整体图表的RTL布局，需要开启Chart.js全局RTL配置，并确保容器元素的文本方向为RTL：

步骤1：修改图表容器HTML #

给容器添加dir="rtl"属性：

<div class="chart-container" style="position: relative; height:60vh;" dir="rtl">
    <canvas id="myChart"></canvas>
</div>

步骤2：在Chart.js配置中开启全局RTL #

在options.layout中添加rtl: true：

options: {
  // ... 原有配置
  layout: {
    rtl: true
  },
  // ... 其他配置
}

完整修改后的代码示例 #

整合以上修改后的完整代码如下：

<div class="chart-container" style="position: relative; height:60vh;" dir="rtl">
    <canvas id="myChart"></canvas>
</div>
<button id="days7">Show 7 Days Data</button>
<script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.umd.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const ctx = document.getElementById('myChart').getContext('2d');
        
        const datasets = [
            { label: "عيار 24", color: "#085703", rates: <?php echo json_encode($finalRates); ?> }
        ];

        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: datasets.map(ds => ({
                    label: ds.label,
                    data: [],
                    backgroundColor: "#fbfbfb",
                    borderColor: ds.color
                }))
            },
            options: {
                maintainAspectRatio: false,
                responsive: true,
                layout: {
                    rtl: true
                },
                interaction: {
                    intersect: false,
                    axis: 'x'
                },
                scales: {
                    y: {
                        ticks: {
                            callback: function(value) {
                                return new Intl.NumberFormat('ar-AE').format(value);
                            }
                        }
                    },
                    x: {
                        ticks: {
                            callback: function(value) {
                                return new Date(value).toLocaleDateString('ar-AE', {
                                    year: 'numeric',
                                    month: 'short',
                                    day: 'numeric'
                                });
                            }
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        align: 'center',
                        rtl: true,
                    },
                }
            }
        });

        function updateChart(days) {
            const endDate = new Date();
            const startDate = new Date();
            startDate.setDate(endDate.getDate() - days);

            const dates = [];
            for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
                if (d.getDay() !== 0) dates.push(d.toISOString().split('T')[0]);
            }
            dates.reverse();

            myChart.data.labels = dates;
            datasets.forEach((ds, i) => {
                myChart.data.datasets[i].data = ds.rates.slice(0, dates.length);
            });
            myChart.update();
        }

        document.getElementById('days7').addEventListener('click', () => updateChart(7));
        updateChart(7);
    });
</script>

额外注意事项 #

• 确保WordPress主题全局文本方向设置为rtl，避免局部RTL与全局LTR冲突
• 若日期格式不符合需求，可调整toLocaleDateString的参数，比如添加weekday: 'short'显示阿拉伯语星期
• 若布局仍有问题，可尝试给canvas元素直接添加dir="rtl"属性

内容的提问来源于stack exchange，提问作者Jessica