如何通过图表创建误差幅度？

问题描述

我正在尝试创建一个如下面的屏幕截图所示的图表，但是我不知道如何使用recharts添加误差幅度。可能吗？还是有其他反应图库支持？

解决方法

可以使用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/