代码之家 › 专栏 › 技术社区 › LinusG.

无法设置nivo饼图配色方案

nivo-slider charts reactjs

0

LinusG. · 技术社区 · 5 年前

我整合了 nivo library 。我设法让这个饼图工作:

为此,我使用了示例中稍微修改过的代码:

<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 prop改为“greys”,如他们的文档所示:

colors={{ scheme: 'greys' }}

这将导致:

我也试过:

colors="greys"

使用 "greens" 结果也是一样的。

如果你想试试:

我需要做什么?

0 回复 | 直到 5 年前

1

2

Dharman Aman Gojariya 4 年前

我看到这是一个老问题,但我最近在与nivo集成时遇到了同样的问题。然而,我确实找到了一个解决方案,所以我决定无论如何都要分享它。

在尝试之后,我发现交互式视图中提供的代码在React中无效,如果你想使用一个主题,你应该使用以下语法:

colors={"nivo"} // or the name of the theme you picked

而不是:

colors={{ scheme: 'nivo' }}

PS:如果你想使用其他一些主题,你可能需要额外提供它们,因为默认情况下只有几个主题随nivo一起提供。

2

0

LW001 Rohan Muhammad 2 年前

属性名称不是颜色,而是颜色:

color={{ scheme: "nvio" }}