無法設置 nivo 餅圖配色方案

Question

我集成了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"也會產生相同的結果。

如果您想嘗試一下：

我需要做什么？

Answer 1

我看到這是一個老問題，但我最近在與 nivo 集成時遇到了同樣的問題。 但是我確實找到了解決方案，所以我還是決定分享它。

在玩了之后我發現交互式視圖中提供的代碼在 React 中是無效的，如果你想使用一個主題，你應該使用以下語法：

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

代替：

colors={{ scheme: 'nivo' }}

PS：如果您想使用其他一些主題，您可能需要另外提供它們，因為默認情況下只有幾個主題帶有 nivo。