如何过滤 react-chartjs-2

Question

我在我的项目中使用 react-chartjs-2，我正在用它创建一个分组堆叠条形图，以删除重复的标签我创建了一个自定义 generateLabels 函数，但是自定义 generateLabels 函数的问题是当我点击图表图例（即电影院）时，它只更新右侧（较高）图表而左侧（较小）图表不更新。我知道有onClick 功能但我找不到如何使用它：

onClick: (e, legendItem) => {
        let i = legendItem.datasetIndex;
        let ci = chRef.current.chartInstance;
      }

<Bar data={data} width={100} height={50} options={options} ref={chRef} />

有什么解决办法吗？ 我希望更新两个图表（更高和更小）。 我已突出显示此图像中更新的条形图：

这是我的代码

import React, { useRef } from "react";
import { Bar } from "react-chartjs-2";

const mocked_data = {
  labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
  spend_per_channel: {
    spends: [
      {
        label: "Cinema",
        data: [56, 23, 55, 56, 57]
      },
      {
        label: "Retails",
        data: [22, 17, 32, 47, 62]
      },
      {
        label: "Fashion",
        data: [46, 73, 25, 76, 27]
      },
      {
        label: "Oil",
        data: [26, 40, 80, 50, 62]
      },
      {
        label: "Gas",
        data: [36, 13, 35, 46, 67]
      }
    ],
    sales: [
      {
        label: "Cinema",
        data: [156, 123, 155, 56, 157]
      },
      {
        label: "Retail",
        data: [122, 117, 132, 147, 162]
      },
      {
        label: "Fashion",
        data: [416, 173, 125, 176, 127]
      },
      {
        label: "Oil",
        data: [126, 135, 180, 100, 86]
      },
      {
        label: "Gas",
        data: [136, 113, 135, 146, 167]
      }
    ]
  }
};

const MyChart = () => {
  const chRef = useRef(null);

  const CHART_COLORS = [
    "#e35b2c",
    "#e77235",
    "#eb8a40",
    "#f0a04b",
    "#f5b858",
    "#f9cf63",
    "#fde76e",
    "#fced86",
    "#ffffb7",
    "#fefeeb"
  ];

  const spendsdata = mocked_data.spend_per_channel.spends.map(
    (spend, index) => {
      return {
        label: spend.label,
        backgroundColor: CHART_COLORS[index],
        data: spend.data,
        stack: 1
      };
    }
  );

  const salesdata = mocked_data.spend_per_channel.sales.map((sale, index) => {
    return {
      label: sale.label,
      backgroundColor: CHART_COLORS[index],
      data: sale.data,
      stack: 2
    };
  });

  const newdataset = [spendsdata, salesdata];
  const spnedperchanneldata = newdataset.flat();

  const data = {
    labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
    datasets: spnedperchanneldata
  };

  const options = {
    legend: {
      position: "bottom",
      labels: {
        generateLabels: function(chart) {
          return Chart.defaults.global.legend.labels.generateLabels
            .apply(this, [chart])
            .filter(function(item, i) {
              return i > 4;
            });
        },
        boxWidth: 10,
        usePointStyle: true
      },
      onClick: (e, legendItem) => {
        let i = legendItem.datasetIndex;
        let ci = chRef.current.chartInstance;
      }
    }
  };

  return (
    <>
      <Bar data={data} width={100} height={50} options={options} ref={chRef} />
    </>
  );
};

export default MyChart;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

您可以在此代码框demo查看现场演示

请帮忙？

Answer 1

您必须使用状态变量来保存图表数据和单击图例修改状态数据并将新数据发送到条形图 工作代码link

import React from "react";
import { Bar } from "react-chartjs-2";

const mocked_data = {
  labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
  spend_per_channel: {
    spends: [
      {
        label: "Cinema",
        data: [56, 23, 55, 56, 57]
      },
      {
        label: "Retails",
        data: [22, 17, 32, 47, 62]
      },
      {
        label: "Fashion",
        data: [46, 73, 25, 76, 27]
      },
      {
        label: "Oil",
        data: [26, 40, 80, 50, 62]
      },
      {
        label: "Gas",
        data: [36, 13, 35, 46, 67]
      }
    ],
    sales: [
      {
        label: "Cinema",
        data: [156, 123, 155, 56, 157]
      },
      {
        label: "Retail",
        data: [122, 117, 132, 147, 162]
      },
      {
        label: "Fashion",
        data: [416, 173, 125, 176, 127]
      },
      {
        label: "Oil",
        data: [126, 135, 180, 100, 86]
      },
      {
        label: "Gas",
        data: [136, 113, 135, 146, 167]
      }
    ]
  }
};

const MyChart = () => {
  const CHART_COLORS = [
    "#e35b2c",
    "#e77235",
    "#eb8a40",
    "#f0a04b",
    "#f5b858",
    "#f9cf63",
    "#fde76e",
    "#fced86",
    "#ffffb7",
    "#fefeeb"
  ];

  const spendsdata = mocked_data.spend_per_channel.spends.map(
    (spend, index) => {
      return {
        label: spend.label,
        backgroundColor: CHART_COLORS[index],
        data: spend.data,
        hidden: false,
        stack: 1
      };
    }
  );

  const salesdata = mocked_data.spend_per_channel.sales.map((sale, index) => {
    return {
      label: sale.label,
      backgroundColor: CHART_COLORS[index],
      data: sale.data,
      hidden: false,
      stack: 2
    };
  });

  const newdataset = [spendsdata, salesdata];
  const spnedperchanneldata = newdataset.flat();

  const [data, setData] = React.useState(spnedperchanneldata);
  const options = {
    legend: {
      position: "bottom",
      labels: {
        generateLabels: function(chart) {
          return Chart.defaults.global.legend.labels.generateLabels
            .apply(this, [chart])
            .filter(function(item, i) {
              return i > 4;
            });
        },
        boxWidth: 10,
        usePointStyle: true
      },
      onClick: (e, legend) => {
        onclick(legend);
      }
    }
  };

  const onclick = React.useCallback(
    legend => {
      let newData = data.map(item => {
        if (item.label === legend.text) item.hidden = !item.hidden;
        return item;
      });

      setData(newData);
    },
    [data, setData]
  );

  return (
    <>
      <Bar
        data={{
          labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
          datasets: data
        }}
        width={100}
        height={50}
        options={options}
      />
    </>
  );
};

export default MyChart;