Question

当我使用recharts在RTL（对于阿拉伯语或希伯来语）的包装器中呈现图表时，UI会搞砸。库是否为RTL呈现提供API？

<div className="right-to-left">
     <PieChart width={400} height={250} onMouseEnter={this.onPieEnter}>
         <Tooltip/>
         <Legend />
         <Pie data={data}></Pie>
     </PieChart>
</div>

Answer 1

我不确定UI搞砸了是什么意思。我们遇到了一个问题，即提示信息的位置计算不正确，并且不在光标处。

我在这里找到了解决方法：

https://github.com/recharts/recharts/issues/263

显然，类为.recharts-wrapper的元素应具有属性direction: ltr。另外，我通过道具反转了轴的方向和方向（对于XAxis是reversed，对于YAxis是orientation）。

此解决方案在RTL环境中对我有效：

<ResponsiveContainer>
    <LineChart data={sortedData} style={{direction: 'ltr'}}>
        <XAxis
            dataKey="date"
            reversed={true} 
        />
        <YAxis
            dataKey="score"
            orientation="right"
            scale="linear"
        />
        <Tooltip
            content={<CustomTooltip />}
        />
        <Line dataKey="score" type="monotone" />
    </LineChart>
</ResponsiveContainer>

在RTL中渲染recharts图表

1 个答案: