Блог

Я использую 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) amp;amp; /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
    });