[英]Cannot set nivo pie chart color scheme
I integrated the nivo library .我集成了nivo 库。 I managed to get this pie chart to work:
我设法让这个饼图工作:
For this, I used this slightly modified code from the example:为此,我使用了示例中经过稍微修改的代码:
<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"
/>
Now, I wanted the colors to be a grayscale, so I changed the colors
prop to "greys", as shown in their docs:现在,我希望 colors 成为灰度,所以我将
colors
更改为“灰色”,如他们的文档所示:
colors={{ scheme: 'greys' }}
This results in:这导致:
I also tried:我也试过:
colors="greys"
Using "greens"
also results in the same.使用
"greens"
也会产生相同的结果。
If you want to try it out:如果您想尝试一下:
What do I need to do?我需要做什么?
I see that this is an old question, but I recently encountered the same issue when integrating with nivo.我看到这是一个老问题,但我最近在与 nivo 集成时遇到了同样的问题。 However I did find a solution so I decided to share it anyway.
但是我确实找到了解决方案,所以我还是决定分享它。
After playing around with it I found that the code provided in the interactive view is not valid in React, if you would like to use a theme you should use the following syntax:在玩了之后我发现交互式视图中提供的代码在 React 中是无效的,如果你想使用一个主题,你应该使用以下语法:
colors={"nivo"} // or the name of the theme you picked
instead of:代替:
colors={{ scheme: 'nivo' }}
PS: If you want to use some of the other themes you might need to supply them additionally since just a couple of them come with nivo by default. PS:如果您想使用其他一些主题,您可能需要另外提供它们,因为默认情况下只有几个主题带有 nivo。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.