如何用阿拉伯语显示Js.Chart

Question

这是我的客户网站。它以阿拉伯语显示了阿联酋的黄金汇率。我嵌入了 Chart.js，它显示了过去四年的黄金价格，但图表是英文的。我面临两个问题：

1. 数字是英文而不是阿拉伯文。
2. 文本应该是从右到左（RTL）的，但它却是从左到右（LTR）显示的。

如果您看到图表，只有标签是阿拉伯语的 该网站是用 wordpress 制作的。

我阅读了Chart.Js文档并更改了属性，但结果没有实现。 我也问了chatGPT，但该解决方案也不起作用。

<div class="chart-container" style="position: relative; height:60vh;">
    <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');
        
        // Predefined datasets and labels
        const datasets = [
            { label: "عيار 24", color: "#085703", rates: <?php echo json_encode($finalRates); ?> }
        ];

        // Initialize the chart
        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,
                    interaction: {
                        intersect: false,
                        axis: 'x'
                    },
                    plugins: {
                        title: {
                            display: true,
                        },
                        legend: {
                    display: true,
                    position: 'top',
                    align: 'center',
                    rtl: true,
                },
            }
        });

        // Fetch data and update the chart
        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]); // Exclude Sundays
            }
            dates.reverse();

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

        // Add event listener for the 7-day button
        document.getElementById('days7').addEventListener('click', () => updateChart(7));

        // Default chart view
        updateChart(7);
    });
</script>

Answer 1

RTL 选项仅适用于图例顺序。我也看过

textDirection: 'rtl'

，但这也是为了传说。
要获取阿拉伯语数字，请尝试

locale

选项：

options: {
    locale: 'ar-SA',
    ...
}

如果您希望 Y 轴向右并反转 X 轴顺序，您还可以添加以下内容：

options: {
    ...
    scales: {
        x: {
            reverse: true
        },
        y: {
            position: 'right'
        }
    }
    ...
}