javascript - 在 RTL 中渲染 recharts 图表

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>