React + Recharts 图例无法正常工作
React + Recharts legend not working properly
我正在使用 React + Recharts 创建堆叠和分组条形图,这是我第一次使用 Recharts。但图例无法正常工作,我希望图例在每个组中切换两个图形,但它仅适用于左侧栏而不适用于右侧栏。
是否可以同时适用于两者?
我是这样做的:
const selectBar = event => {
let updatedLabels = [];
let updatedLabelsSpend = [];
for (let i = 0; i < data.labels.length; i++) {
let label = data.labels[i];
let spendLabel = data.filteredDataSpend[i];
if (label.key !== event.value) {
updatedLabels.push(label);
updatedLabelsSpend.push(spendLabel);
} else {
if (/\s/.test(label.key) && /\s/.test(spendLabel.key)) {
let newLabel = { key: label.key.trim(), color: label.color };
let newLabelSpend = {
key: spendLabel.key.trim(),
color: spendLabel.color,
};
updatedLabels.push(newLabel);
updatedLabelsSpend.push(newLabelSpend);
} else {
let newLabel = { key: label.key + ' ', color: label.color };
let newLabelSpend = {
key: spendLabel.key + ' ',
color: spendLabel.color,
};
updatedLabels.push(newLabel);
updatedLabelsSpend.push(newLabelSpend);
}
}
}
setData({ ...data, labels: updatedLabels });
};
您可以在demo
中查看演示
有什么帮助吗?
您错过了 filteredDataSpend
的状态更新,这个小改动修复了它
setData({
...data,
labels: updatedLabels,
filteredDataSpend: updatedLabelsSpend
});
我正在使用 React + Recharts 创建堆叠和分组条形图,这是我第一次使用 Recharts。但图例无法正常工作,我希望图例在每个组中切换两个图形,但它仅适用于左侧栏而不适用于右侧栏。 是否可以同时适用于两者?
我是这样做的:
const selectBar = event => {
let updatedLabels = [];
let updatedLabelsSpend = [];
for (let i = 0; i < data.labels.length; i++) {
let label = data.labels[i];
let spendLabel = data.filteredDataSpend[i];
if (label.key !== event.value) {
updatedLabels.push(label);
updatedLabelsSpend.push(spendLabel);
} else {
if (/\s/.test(label.key) && /\s/.test(spendLabel.key)) {
let newLabel = { key: label.key.trim(), color: label.color };
let newLabelSpend = {
key: spendLabel.key.trim(),
color: spendLabel.color,
};
updatedLabels.push(newLabel);
updatedLabelsSpend.push(newLabelSpend);
} else {
let newLabel = { key: label.key + ' ', color: label.color };
let newLabelSpend = {
key: spendLabel.key + ' ',
color: spendLabel.color,
};
updatedLabels.push(newLabel);
updatedLabelsSpend.push(newLabelSpend);
}
}
}
setData({ ...data, labels: updatedLabels });
};
您可以在demo
中查看演示有什么帮助吗?
您错过了 filteredDataSpend
的状态更新,这个小改动修复了它
setData({
...data,
labels: updatedLabels,
filteredDataSpend: updatedLabelsSpend
});