ReactJS ChartJS，用户点击按钮时数据发生变化

vngu2lb8 于 2023-03-02 发布在 Chart.js

关注(0)|答案(1)|浏览(191)

我遇到了一个问题，用户希望在单击树菜单时在条形图中动态更改数据。
其流程如下：
当用户刚刚登录并打开构建页面时，默认数据出现在条形图上，名为省级数据。
然后，当用户单击ACEH数据时，ACEH数据将自动出现在条形图上。
下面是我的条形图数据：

const dataChart = useMemo(
        () => ({
          dataProv: {
            labels: dataProvinsi.map((o) => o.provinsi),
            datasets: [
              {
                fill: true,
                label: null,
                backgroundColor: colorCode,
                borderColor: colorCode,
                borderWidth: 2,
                borderRadius: 12,
                data: dataProvinsi.map((o) => o.total_building),
              },
            ],
          },
          dataCity: {
            labels: dataKota.map((o) => o.kota),
            datasets: [
              {
                fill: true,
                label: null,
                backgroundColor: colorCode,
                borderColor: colorCode,
                borderWidth: 2,
                borderRadius: 12,
                data: dataKota.map((o) => o.total_building),
              },
            ],
          },
        }),
        [dataKota, dataProvinsi]
      );

这是用户点击时更改数据的逻辑。当我在控制台中使用它记录时，数据显示如下：

const changeData2 = () => {
    const data = [dataChart.dataCity];
    setDataKota(data);
    console.log(data);
  };

这是一个例子，当我尝试在浏览器：
https://va.media.tumblr.com/tumblr_rqe2h1npcr1zb5h2t.mp4
单击菜单时无法更改图表数据。
我的完整代码可以在这里找到。https://pastebin.com/zcyV09yJ

chart.js

来源：https://stackoverflow.com/questions/75586591/reactjs-chartjs-data-changes-when-user-clicked-the-button

1条答案

按热度按时间

rkttyhzu1#

<Bar
  type={"bar"}
  height={120}
  data={dataChart.dataProv} // this state is no mutating no updates/re-renders are stimulated
  options={options}
  plugins={plugins}
  redraw
/>

传递给Bar组件的数据始终是相同的dataChart.dataProv，因此您看不到更改。
我认为您需要创建另一个状态，它将保存dataChart备忘录中的两个数据属性之一。
我的建议是有一个状态，它将保存您想要在图表中呈现的备忘录中的属性名称，例如dataType，该状态将相应地保存值dataProv和dataCity。

const [dataType, setDataType] = useState('dataProv');

在点击呼叫时更新其值

const changeData2 = () => {
  setDataType('dataCity');
};

然后在Bar组件中，按如下方式使用它

<Bar
  type={"bar"}
  height={120}
  data={dataChart[dataType]}
  options={options}
  plugins={plugins}
  redraw
/>

希望能有所帮助。

赞(0）回复(0）举报 2023-03-02

我来回答

ReactJS ChartJS，用户点击按钮时数据发生变化

1条答案

相关问题

热门标签

最新问答