Javascript 如何过滤react-chartjs-2

我在我的项目中使用react-chartjs-2，并用它创建了一个分组堆叠条形图，以删除重复标签。我创建了一个自定义

generateLabels

函数，但自定义

generateLabels

函数的问题是，当我单击图表图例（即电影院）时，它只更新右侧（更高）图表和左侧（较小）图表不更新。我知道有

onClick

功能，但我找不到如何使用它：

onClick:（e，legendItem）=>{
设i=legendItem.datasetIndex；
设ci=chRef.current.chartInstance；
}

---

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

从“React”导入React；
从“react-chartjs-2”导入{Bar}；
常量模拟_数据={
标签：[“品牌1”、“品牌2”、“品牌3”、“品牌4”、“品牌5”]，
每个频道的花费：{
花费：[
{
标签：“电影院”，
数据：[56,23,55,56,57]
},
{
标签：“零售”，
数据：[22,17,32,47,62]
},
{
标签：“时尚”，
数据：[46,73,25,76,27]
},
{
标签：“油”，
数据：[26,40,80,50,62]
},
{
标签：“气体”，
数据：[36,13,35,46,67]
}
],
销售：[
{
标签：“电影院”，
数据：[15612315556157]
},
{
标签：“零售”，
数据：[122、117、132、147、162]
},
{
标签：“时尚”，
数据：[416173125176127]
},
{
标签：“油”，
数据：[12613518010086]
},
{
标签：“气体”，
数据：[136113135146167]
}
]
}
};
常量MyChart=（）=>{
常量图表颜色=[
“#e35b2c”，
“#e77235”，
“#eb8a40”，
“#f0a04b”，
“#f5b858”，
“#f9cf63”，
“#fde76e”，
“#fced86”，
“#ffffb7”，
“菲菲”
];
const spendsdata=mock_data.spend_per_channel.spends.map(
（支出，指数）=>{
返回{
label:spend.label，
背景颜色：图表颜色[索引]，
数据：expense.data，
隐藏：假，
堆栈：1
};
}
);
const salesdata=mock_data.spend_per_channel.sales.map（（sale，index）=>{
返回{
标签：sale.label，
背景颜色：图表颜色[索引]，
数据：sale.data，
隐藏：假，
堆栈：2
};
});
const newdataset=[spendsdata，salesdata]；
const spnedperchanneldata=newdataset.flat（）；
const[data，setData]=React.useState（spnedpperchanneldata）；
常量选项={
图例：{
位置：“底部”，
标签：{
发电机标签：功能（图表）{
返回Chart.defaults.global.legend.labels.generateLabels
.应用（此[图表]）
.过滤器（功能（第i项）{
返回i>4；
});
},
箱宽：10，
usePointStyle:true
},
onClick：（e，图例）=>{
onclick（图例）；
}
}
};
const onclick=React.useCallback(
图例=>{
让newData=data.map（项=>{
如果（item.label==图例.text）item.hidden=！item.hidden；
退货项目；
});
setData（newData）；
},
[数据，设置数据]
);
返回(
);
};
导出默认MyChart；

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;