如何使用recharts创建误差范围？

Question

我正在尝试创建一个类似下面截图的图表，但我不知道如何使用recharts添加误差范围。有可能吗？还有没有其他的react图表库支持？

​

​

Answer 1

可以使用Recharts来实现这一点，但有一个变通方法，因为对于误差范围没有直接选项。

为了类似于您的图片上给出的示例，我使用了LineChart。我使用的技巧是，对于给定的一条线，另一条线是用相同的值绘制的，但是使用了更大的笔划和不同的颜色。

下面是我得到的信息：

const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = 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},
];

const SimpleLineChart = React.createClass({
    render () {
    return (
        <LineChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="pv" stroke="#5B3BDA" activeDot={{r: 8}}/>
       // Doubled line for the value pv with a strike set to 20
       <Line strokeWidth={20} type="monotone" dataKey="pv" stroke="rgba(91, 59, 200, 0.5)" dot={false}/>
       <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
       // Doubled line for the value uv with a stroke width of 20
       <Line strokeWidth={20} type="monotone" dataKey="uv" stroke="rgba(130, 202, 157, 0.5)" dot={false} />
      </LineChart>
    );
  }
})

您可以在小提琴中直接看到结果：https://jsfiddle.net/3cLs1det/