问题描述
如何将我的 yAxis 笛卡尔网格调整到条形的开头而不是中心,并且还沿 y 轴延伸到条形区域上方,如第二张图片所示。 Click to view image
这是我的代码
<ResponsiveContainer height={250} width={"100%"} >
<BarChart data={data}>
<YAxis
dataKey="total"
tickFormatter={(tick) => {
if(tick >= 1000 && tick < 1000000) return ((tick / 1000) + 'K')
else if (tick >= 1000000)return ((tick / 1000000) + 'M');
else return tick;
}}
label={<AxisLabel>Number of Items</AxisLabel>}
/>
<XAxis dx={-20} dataKey="product" xAxisId={0} tick={{ fontSize: 16 }} dy={10} />
<XAxis dx={-20} dy={-10} orientation="top" xAxisId={1} dataKey="product" tick={{ fontSize: 16 }} />
<Cartesiangrid strokeDasharray="8" stroke="#DFE2E6" />
<Tooltip cursor={{ fill: "transparent" }} />
{dataKeys && dataKeys.map((itemKey,idx) =>
<Bar key={itemKey + idx} dataKey={itemKey} fill={colors[idx]} stackId="a" barSize={80}></Bar>)}
</BarChart>
</ResponsiveContainer>
解决方法
您可以在这里找到一些非常好的示例: http://recharts.org/en-US/
另外,看看这个例子: http://recharts.org/en-US/examples/ComposedChartWithAxisLabels
这个小片段基本上是基于第二个。请注意,为了解决网格调整问题,我只是在左侧添加了一个空栏。这样,只有右侧堆叠的条形才会可见。
要显示“斜率”,您只需添加一个与原始数据具有相同值的面积图。
const data = [
{
name: 'Page A',uv: 96,pv: 800,amt: 800,},{
name: 'Page B',uv: 452,pv: 967,amt: 967,{
name: 'Page C',uv: 512,pv: 1098,amt: 1098,{
name: 'Page D',uv: 248,pv: 1200,amt: 1200,{
name: 'Page E',uv: 300,pv: 1108,amt: 1108,{
name: 'Page F',uv: 185,pv: 680,amt: 680,];
class Example extends PureComponent {
render() {
return (
<ComposedChart
width={500}
height={400}
data={data}
margin={{
top: 20,right: 20,bottom: 20,left: 20,}}
>
<CartesianGrid strokeDasharray="8" stroke="#DFE2E6" />
<XAxis type="category" dataKey="name" />
<YAxis type="number" />
<Tooltip />
<Legend />
<Area dataKey="amt" fill="#808080" stroke="#505050" />
<Bar dataKey="" barSize={20} fill="#ffffffff" />
<Bar dataKey="pv" stackId="a" barSize={20} fill="#413ea0" />
<Bar dataKey="uv" stackId="a" barSize={20} fill="#909090" />
</ComposedChart>
);
}
}