Victory Native 中的圆形雷达图

Question

我正在尝试在 Victory Native 中创建雷达图，但我需要将雷达的边缘倒圆角。

提供的图表如下所示：

虽然我需要让它看起来像这样：

理想情况下，我会像这样在样式中添加 lineTension：

<VictoryGroup 
     colorScale={["gold", "orange", "tomato"]}
     style={{ data: { fillOpacity: 0.2, strokeWidth: 2, lineTension: 0.7 } }}
 >
    {this.state.data.map((data, i) => {
       return <VictoryArea key={i} data={data}/>;
    })}
</VictoryGroup>

但这没有任何作用。

非常感谢您的帮助！！

Answer 1

您可以在您的 VictoryArea 组件上使用 interpolation 道具和这些可用的极坐标图选项：

"basis", "cardinal", "catmullRom", "linear"

interpolation prop in Victory documentation

<VictoryArea key={i} data={data} interpolation="cardinal" />

Victory Native 中的圆形雷达图

Rounded Radar Chart in Victory Native

react-native

victory-charts

victory-native