Nivo ResponsiveBar 中未显示数据的颜色

如何解决Nivo ResponsiveBar 中未显示数据的颜色

我的 React 应用中有一个 ResponsiveBar 组件，但颜色没有按预期显示。我已遵循 official docs 中的准则。数据如下所示：

{
  "data": [
    {
      "bucket": "Prospects Imported","Oliver Queen": 10,"Oliver QueenColor": "hsl(177.06123087721252,18.89068530574307%,16.53273587631816%)","Ray Palmer": 10,"Ray PalmerColor": "hsl(287.8197874078934,62.18829850513416%,13.604789291455033%)"
    },{
      "bucket": "Assigned","Oliver Queen": 158,"Oliver QueenColor": "hsl(130.29946551632844,21.88588940442986%,85.78716216902176%)","Ray Palmer": 2,"Ray PalmerColor": "hsl(192.1716868789712,1.8797192964029374%,7.158239130186517%)"
    },{
      "bucket": "Calls Made","Oliver Queen": 24,"Oliver QueenColor": "hsl(164.04170858156496,47.95430493222506%,79.37512126292603%)","Ray Palmer": 0,"Ray PalmerColor": "hsl(38.148811405937096,23.83917214972724%,37.366418973565544%)"
    },{
      "bucket": "Emails Sent","Oliver Queen": 120,"Oliver QueenColor": "hsl(316.96830604521773,3.6081626612787465%,54.49458825991964%)","Ray PalmerColor": "hsl(223.97078722168806,98.41710495281106%,47.3590863956761%)"
    },{
      "bucket": "Texts Sent","Oliver Queen": 0,"Oliver QueenColor": "hsl(83.50359081784423,77.57558426662207%,3.9445038120280884%)","Ray PalmerColor": "hsl(127.2531925420342,14.870911431246302%,27.26153404734799%)"
    }
  ],"keys": [
    "Oliver Queen","Ray Palmer"
  ]
}

我将 data 和 keys 作为道具传递给 ResponsiveBar。目前条形图看起来像这样，颜色错误：

如您所见，数据中的颜色没有反映出来。

这是我的 ResponsiveBar 组件：

<ResponsiveBar
                    data={chartListSection.data}
                    keys={chartListSection.keys}
                    indexBy="bucket"
                    margin={{ top: 50,right: 50,bottom: 110,left: 60 }}
                    padding={0.3}
                    valueScale={{ type: 'linear' }}
                    indexScale={{ type: 'band',round: true }}
                    colors={{ scheme: 'nivo' }}
                    defs={[
                      {
                        id: 'dots',type: 'patternDots',background: 'inherit',color: '#38bcb2',size: 4,padding: 1,stagger: true,},{
                        id: 'lines',type: 'patternLines',color: '#eed312',rotation: -45,linewidth: 6,spacing: 10,]}
                    borderColor={{
                      from: 'color',modifiers: [['darker',1.6]],}}
                    axisTop={null}
                    axisRight={null}
                    axisBottom={{
                      tickSize: 5,tickPadding: 5,tickRotation: 0,legend: '',legendPosition: 'middle',legendOffset: 32,}}
                    axisLeft={{
                      tickSize: 5,legend: 'Prospects',legendOffset: -53,}}
                    labelSkipwidth={12}
                    labelSkipHeight={12}
                    labelTextColor={{
                      from: 'color',}}
                    legends={[
                      {
                        dataFrom: 'keys',anchor: 'bottom-left',direction: 'row',justify: false,translateX: 0,translateY: 90,itemsspacing: 2,itemWidth: 100,itemHeight: 20,itemDirection: 'left-to-right',itemOpacity: 0.85,symbolSize: 20,effects: [
                          {
                            on: 'hover',style: {
                              itemOpacity: 1,],]}
                    animate={true}
                    motionStiffness={90}
                    motiondamping={15}
                  />

如何让数据中的颜色显示在栏中？

解决方法

您可以使用映射到您的颜色字​​段的函数来设置 colors 道具：

<ResponsiveBar
    ......
    colors={({id,data}) => data[`${id}Color`]}
    ......
/>

在上面的代码中，颜色以 Color 结尾

示例结果：

Sandbox