带图表的正负条形图颜色答案

【问题标题】：Positive Negative Bar Chart Color w/ Recharts带图表的正负条形图颜色
【发布时间】：2020-07-02 16:40:20
【问题描述】：

我正在尝试使用Rechart 创建正/负条形图，但我不知道如何有条件地设置颜色填充，如果值为正或负。我想要这样的东西：

来自文档的示例代码：

import React, { PureComponent } from 'react';
import {
  BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine,
} from 'recharts';

const data = [
  {
    name: 'Page A', uv: 4000, pv: 2400, amt: 2400,
  },
  {
    name: 'Page B', uv: -3000, pv: 1398, amt: 2210,
  },
  {
    name: 'Page C', uv: -2000, pv: -9800, amt: 2290,
  },
  {
    name: 'Page D', uv: 2780, pv: 3908, amt: 2000,
  },
  {
    name: 'Page E', uv: -1890, pv: 4800, amt: 2181,
  },
  {
    name: 'Page F', uv: 2390, pv: -3800, amt: 2500,
  },
  {
    name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
  },
];

export default class Example extends PureComponent {
  static jsfiddleUrl = 'https://jsfiddle.net/alidingling/q68cz43w/';

  render() {
    return (
      <BarChart
        width={500}
        height={300}
        data={data}
        margin={{
          top: 5, right: 30, left: 20, bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <ReferenceLine y={0} stroke="#000" />
        <Bar dataKey="pv" fill="#8884d8" />
        <Bar dataKey="uv" fill="#82ca9d" />
      </BarChart>
    );
  }
}

请问有没有示例代码可以做到这一点？

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

啊，我需要使用<Cell> 组件！
https://recharts.org/en-US/api/Cell

<BarChart width={730} height={250} data={data}>
  <Bar dataKey="value">
    {
      data.map((entry, index) => (
        <Cell key={`cell-${index}`} stroke={colors[index]}  strokeWidth={index === 2 ? 4 : 1}/>
      ))
    }
  </Bar>
</BarChart>

【讨论】：

【解决方案2】：

你可以做这样的事情。它对我有用！顺便说一下，我这里只用了uv，你也可以像我一样使用 pv。

`<Bar
        dataKey='uv'
    >
        {data.map((datum, entry, index) => (
            <Cell
                key={`cell-${index}`}
                fill={
                    datum.uv > 0
                        ? 'green'
                        : 'red'
                }
            />
        ))}
    </Bar>`

【讨论】：