在RTL中呈现重图表

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。此外，我通过props反转轴的方向和方向( 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>