[英]Recharts Bar chart - conditionally show labels only on certain bars in stacked bar graph
I am trying to show the bar with top 4 values and put labels in them.我正在尝试显示带有前 4 个值的栏并在其中放置标签。 To give more context, I am planning to map those labels outside the graph and write about it in more detail.
为了提供更多上下文,我计划将这些标签映射到图表之外并更详细地写下它。 How can I show labels on only certain bars in a bar chart.
如何仅在条形图中的某些条形上显示标签。 I want to show labels on only bars with top 4 highest values.
我只想在前 4 个最高值的条形上显示标签。 codesandbox link if it helps: https://codesandbox.io/s/fervent-chandrasekhar-o39ms
如果有帮助,codesandbox 链接: https ://codesandbox.io/s/fervent-chandrasekhar-o39ms
import React, { PureComponent } from "react";
import {
BarChart,
Bar,
Cell,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
LabelList
} from "recharts";
const data = [
{
name: "Page A",
uv: 4000,
pv: 2400,
amt: 2400,
highlight: "d" // the bar of uv in Page A should show 'd' as label inside
},
{
name: "Page B",
uv: 3000,
pv: 1398,
amt: 2210
},
{
name: "Page C",
uv: 2000,
pv: 9800,
amt: 2290,
highlight: "a", // the bar of pv in Page C should show 'a' as label inside
},
{
name: "Page D",
uv: 2780,
pv: 3908,
amt: 2000
},
{
name: "Page E",
uv: 1890,
pv: 4800,
amt: 2181,
highlight: "b" // the bar of pv in Page E should show 'b' as label inside
},
{
name: "Page F",
uv: 2390,
pv: 3800,
amt: 2500
},
{
name: "Page G",
uv: 3490,
pv: 4300,
amt: 2100,
highlight: "c" // the bar of pv in Page G should show 'c' as label inside
}
];
export default class Example extends PureComponent {
render() {
return (
<BarChart
width={600}
height={300}
data={data}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Legend />
<Bar dataKey="pv" stackId="a" fill="#8884d8">
// <LabelList dataKey="highlight" position="middle" /> ... This shows label in all bars with uv as key, I want only certain bars to show label that have highest values
</Bar>
<Bar dataKey="uv" stackId="a" fill="#82ca9d">
// <LabelList dataKey="highlight" position="middle" /> ... This shows label in all bars with uv as key, I want only certain bars to show label that have highest values
</Bar>
</BarChart>
);
}
}
ok, looks like I might have found a solution.好的,看起来我可能已经找到了解决方案。 Involves having some sort of pointers inside the source data array and then rendering custom labels with conditions inside.
涉及在源数据数组中包含某种指针,然后在内部呈现带有条件的自定义标签。
import React, { PureComponent } from "react";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
LabelList
} from "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: 4900,
xv: 3000,
pv: 5000,
amt: 2290,
highlights: [
{
marker: "a",
key: "pv"
},
{
marker: "b",
key: "uv"
}
]
},
{
name: "Page D",
uv: 4700,
pv: 3908,
amt: 2000,
highlights: [
{
marker: "c",
key: "uv"
}
]
},
{
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 renderLabel = (prop, dataKey) => {
const index = prop.index;
const target = data[index];
const highlights = target.highlights || [];
if (highlights.length > 0) {
for (let i = 0; i < highlights.length; i++) {
if (highlights[i].key === dataKey) {
return highlights[i].marker;
}
}
}
};
export default class Example extends PureComponent {
render() {
return (
<BarChart
width={600}
height={300}
data={data}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Legend />
<Bar dataKey="pv" stackId="a" fill="#8884d8">
<LabelList
content={props => renderLabel(props, "pv")}
position="center"
/>
</Bar>
<Bar dataKey="xv" stackId="a" fill="#bb11a9">
<LabelList
content={props => renderLabel(props, "xv")}
position="center"
/>
</Bar>
<Bar dataKey="uv" stackId="a" fill="#82ca9d">
<LabelList
content={props => renderLabel(props, "uv")}
position="center"
/>
</Bar>
</BarChart>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.