如何过滤react-chartjs-2

Question

我在项目中使用react-chartjs-2，并使用它创建分组的堆叠条形图，以删除重复的标签，我创建了自定义generateLabels函数，但是自定义generateLabels函数的问题是当我单击图表图例（即Cinema）时，它只会更新右侧（塔林）图表，而左侧（较小）图不会更新。我知道有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中查看实时演示，>

请帮忙吗？

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

Answer 1

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