[英]Cannot set nivo pie chart color scheme
我集成了nivo 库。 我设法让这个饼图工作:
为此,我使用了示例中经过稍微修改的代码:
<ResponsivePie
data={data}
margin={config.margins}
padding={0.3}
colors="nivo"
borderColor="inherit:darker(1.6)"
animate
motionStiffness={90}
motionDamping={15}
legends={config.legends}
sortByValue
innerRadius={0}
padAngle={0}
cornerRadius={0}
borderWidth={0}
radialLabelsSkipAngle={10}
radialLabelsTextXOffset={6}
radialLabelsTextColor="#333333"
radialLabelsLinkOffset={0}
radialLabelsLinkDiagonalLength={16}
radialLabelsLinkHorizontalLength={24}
radialLabelsLinkStrokeWidth={1}
radialLabelsLinkColor="#CCCCCC"
slicesLabelsSkipAngle={10}
slicesLabelsTextColor="#333333"
/>
现在,我希望 colors 成为灰度,所以我将colors
更改为“灰色”,如他们的文档所示:
colors={{ scheme: 'greys' }}
这导致:
我也试过:
colors="greys"
使用"greens"
也会产生相同的结果。
我需要做什么?
我看到这是一个老问题,但我最近在与 nivo 集成时遇到了同样的问题。 但是我确实找到了解决方案,所以我还是决定分享它。
在玩了之后我发现交互式视图中提供的代码在 React 中是无效的,如果你想使用一个主题,你应该使用以下语法:
colors={"nivo"} // or the name of the theme you picked
代替:
colors={{ scheme: 'nivo' }}
PS:如果您想使用其他一些主题,您可能需要另外提供它们,因为默认情况下只有几个主题带有 nivo。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.