Блог

Я создал диаграмму пончиков в highcharts, в которой значение данных изменяется при выборе выпадающего списка.

Код и код коробки

При выпадающем списке «Выбрать из» данные изменяются, но диаграмма не отображается повторно, и обновленные данные также не отображаются на диаграмме. Диаграмма остается неизменной для любых данных.

Я попытался включить OneToOne={true}. Но это также не помогает.

Есть несколько похожих вопросов, касающихся того же самого, но они не помогли в моем случае.

Если у кого-нибудь есть какие-либо идеи или вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Одним из решений является использование useEffect крючка и передача details зависимостей useEffect, поэтому каждый раз, когда детали будут изменять его состояние, эффект использования будет триггерным, а ваши значения данных будут обновляться:

 import React, { useState, useEffect } from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import PieChart from "highcharts-react-official";

const App = () => {
  const [details, setDetails] = useState("sup");
  let dataValue = [
    ["Firefox", 45.0],
    ["IE", 26.8],
    ["Chrome", 12.8],
    ["Safari", 8.5],
    ["Opera", 6.2],
    ["Others", 0.7]
  ]; //pass default "sup" to datavalue
  const [chartOptions, setChartOptions] = useState({
    chart: {
      type: "pie"
    },
    title: {
      text: ""
    },
    plotOptions: {
      pie: {
        size: "50%",
        allowPointSelect: true,
        cursor: "pointer",
        depth: 35,
        innerSize: 100,
        dataLabels: {
          enabled: false
        },
        showInLegend: true
      }
    },
    series: [
      {
        type: "pie",
        name: "Browser share",
        data: dataValue
      }
    ]
  });
  useEffect(() => {
    console.log(details);
    if (details === "sup") {
      dataValue = [
        ["Firefox", 45.0],
        ["IE", 26.8],
        ["Chrome", 12.8],
        ["Safari", 8.5],
        ["Opera", 6.2],
        ["Others", 0.7]
      ];
    } else if (details === "hola") {
      dataValue = [
        ["Apple", 35],
        ["Guava", 40],
        ["Grapes", 22.5]
      ];
    }
    setChartOptions((prev) => {
      return {
        ...prev,
        series: [
          {
            type: "pie",
            name: "Browser share",
            data: dataValue
          }
        ]
      };
    });
  }, [details]);

  async function newfetchVendor(e) {
    if (!!e) {
      setDetails(e.target.value);
    }
  }

  return (
    <div>
      <select onChange={newfetchVendor}>
        <option value="sup">sup</option>
        <option value="hola">hola</option>
      </select>
      <PieChart
        highcharts={Highcharts}
        options={chartOptions}
        oneToOne={true}
      />
    </div>
  );
};

render(<App />, document.getElementById("root"));