0

我在这里是因为我正在尝试使用 recharts 库构建图表，经过多次不同的尝试以获得所需的结果，我仍然没有得到它。

我的目标图形应与此类似：

在此处输入图像描述

我尝试了许多不同的东西，如条形图、堆叠条形图、组合图表、误差线等，但我无法得到我想要的结果。

到目前为止，我得到的最接近的结果是：

在此处输入图像描述

但是在我尝试将黑色条对齐橙色条顶部的那一刻（使用 stackId 道具）我得到了这个：

在此处输入图像描述

有人知道我能不能用这个库得到我想要的图形？任何帮助，将不胜感激。

第二个图形的代码是这样的：

const customData = [
  { name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
  { name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 },
  { name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
  { name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 },
];

class POC extends React.Component {
  render() {
    return (
      <div className="bar-chart-wrapper">
        <ComposedChart width={400} height={400} data={customData}>
          <XAxis />
          <YAxis />
          <Bar dataKey="uv" fill="#ff7300">
            <ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" />
          </Bar>
          <Bar dataKey="pv">
          </Bar>
        </ComposedChart>
      </div>
    );
  }
}

第三个图形的代码是相同的，但我将道具 stackId="0" 添加到两个栏。

提前感谢任何可以帮助我的人。

4

1 回答 1

1

最后我自己找到了解决方案。

在网上搜索时，我发现了这个Rechart 的问题，它将我与另一个问题联系起来。在那里我找到了一个 jsfiddle 演示，使用该代码和一些更改，我得到了我想要的结果。

这是最终结果：

在此处输入图像描述

这是代码：

const data = [
  { name: 'food', uv: 2000, pv: 1600, amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] },
  { name: 'cosmetic', uv: 3300, pv: 2000, amt: 6500, time: 2, uvError: 120, pvError: 50 },
  { name: 'storage', uv: 3200, pv: 1398, amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] },
  { name: 'digital', uv: 2800, pv: 2400, amt: 4000, time: 4, uvError: 100, pvError: 30 },
];

class POC extends React.Component {
  render() {
    return (
      <div className="bar-chart-wrapper">
        <BarChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
          <XAxis xAxisId={0} />
          <XAxis xAxisId={1} hide/>
          <YAxis/>
          <CartesianGrid strokeDasharray="3 3"/>
          <Bar dataKey="uv" xAxisId={1} fill="#000" />
          <Bar dataKey="pv" xAxisId={0} fill="#ff7300">
            <ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" />
          </Bar>
        </BarChart>
      </div>
    );
  }
}

我希望这对其他人也有帮助。

谢谢 ！

于 2018-05-15T21:22:25.270 回答