4

当我使用 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>
4

1 回答 1

0

我不确定 UI 混乱是什么意思。我们遇到了一个问题，即工具提示位置没有正确计算并且不在光标处。

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

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

显然，具有 class 的元素.recharts-wrapper应该具有 property direction: ltr。此外，我通过道具反转了轴的方向和方向（reversed对于 XAxis 和对于 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>
于 2019-11-22T10:58:57.483 回答