AreaChart

AreaChart 支持添加任何类型的 svg 元素作为子节点，包括 defs、linearGradient 等等。

显示数据格式

<AreaChart width={730} height={250} data={data}
  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
  <defs>
    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
    <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <XAxis dataKey="name" />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Area type="monotone" dataKey="uv" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv) " />
  <Area type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv) " />
</AreaChart>

显示数据格式

<AreaChart
  width={730}
  height={250}
  data={rangeData}
  margin={{
    top: 20, right: 20, bottom: 20, left: 20,
  }}
>
  <XAxis dataKey="day" />
  <YAxis />
  <Area dataKey="temperature" stroke="#8884d8" fill="#8884d8" />
  <Tooltip />
</AreaChart>

父组件

• <ResponsiveContainer />

子组件

• <XAxis />
• <YAxis />
• <ReferenceArea />
• <ReferenceDot />
• <ReferenceLine />
• <Brush />
• <CartesianGrid />
• <Legend />
• <Tooltip />
• <Area />
• <Customized />
• validate svg elements…

Properties

• layout 'horizontal' | 'vertical'

区域图的布局类型，是横向的还是纵向的。

默认值：'horizontal'

• syncId String optional

如果任何两个或者多个类目型图表（LineChart, AreaChart, BarChart, ComposedChart）具有相同的 syncId，这两个图表可以联动，包括 Tooltip 以及 Brush 的联动。

示例：

• Two synchronized AreaChart

• width Number

图表的宽度。

• height Number

图表的高度。

• data Array

输入数据，现在支持的类型是对象数组。

格式：

[{ name: 'a', value: 12 }]
[{ name: 'a', value: [5, 12] }]

• margin Object

图表四周的留白大小，支持传入部分值（如： { top: 5 }）

默认值：{ top: 5, right: 5, bottom: 5, left: 5 }

格式：

{ top: 5, right: 5, bottom: 5, left: 5 }

• stackOffset 'expand' | 'none' | 'wiggle' | 'silhouette'

堆积区域图的偏移类型，这里提供的配置是 d3 支持的四种类型。

默认值：'none'

示例：

• An AreaChart with stackOffset specified to 'expand'
• D3 stackOffset

• baseValue Number | 'dataMin' | 'dataMax' | 'auto'

区域图的基准值。

默认值：auto

• onClick Function optional

鼠标在图表图形区域 click 事件的回调函数。

• onMouseEnter Function optional

鼠标在图表图形区域 mouseenter 事件的回调函数。

• onMouseMove Function optional

鼠标在图表图形区域 mousemove 事件的回调函数。

• onMouseLeave Function optional

鼠标在图表图形区域 mouseleave 事件的回调函数。