React Highcharts - 如何从父组件使用 drillUp？

Question

我正在尝试从父组件向上钻取

这是父组件：

<button onClick={() => {
drillUp();
}}></button>
<TreeMap dataLabel={dataLabel} height={blockHeight} />

在子组件中，我正在渲染 Highchart

<ReactHighcharts
   highcharts={Highcharts}
   options={treeConfig}
></ReactHighcharts>

这是我的树配置

  const treeConfig = {
    chart: {
      height: height,
      events: {
        render() {
          const elements = document.getElementsByClassName(
            "highcharts-point highcharts-color-0 highcharts-internal-node-interactive",
          );
          const drillButton = document.getElementsByClassName(
            "highcharts-drillup-button",
          )[0];
          if (drillButton && drillButton.id !== "drill") {
            drillButton.setAttribute("id", "drill");
          }
          if (elements.length) {
            const sortElements = [...elements].sort((a, b) => {
              return a.width.baseVal.value * a.height.baseVal.value >
                b.width.baseVal.value * b.height.baseVal.value
                ? -1
                : 1;
            });
            sortElements.forEach((el, i) => {
              el.style.setProperty("fill", colorPallete[i], "important");
              el.setAttribute("fill", colorPallete[i]);
            });
          }
        }
      },
    },

我找到了这个 post -> Manually Triggering drillup event, highcharts 但它在 jQuery 中，我试过了但没有用

如何在 React 中从父组件引发 drillUp 事件？

提前致谢！

Answer 1

好的，这比我想象的要复杂，因为文档很糟糕，但我能够在 stackblitz

上得到它运行

为了能够在图表上手动或以编程方式调用事件，我们需要获取对图表对象的引用。要获取子组件的引用，我们可以这样做：

const Child = ({ setChart }) => {
  ... 
  
  const chartComponent = useRef(null);

  useEffect(() => {
    setChart(chartComponent.current.chart);
  }, []);

  highchartsDrillDown(Highcharts);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      ref={chartComponent}
    />
  );
}

setChart 是来自父级的道具，用于在父级上设置图表对象

在父级上，您可以像这样手动调用下钻和上钻：

  const Parent = () => {
  const [chart, setChart] = useState(null);

  const handleDrillUp = () => {
    chart.drillUp();
  };

  const handleDrillDown = () => {
    chart.series[0].data[0].doDrilldown(); // you can chose the series and data
  };

  return (
    <div>
      <button onClick={handleDrillUp}> drill up</button>
      <button onClick={handleDrillDown}> drill down</button>
      <Child setChart={setChart} />;
    </div>
  );
};

编辑： 之前的解决方案是针对 highcharts-react-official 库的。

刚刚注意到您使用的 highcharts 库与我使用的库不同，因此 react-highcharts 唯一的区别是：

const afterRender = (chart) => {setChart(chart)};

<ReactHighcharts config = {config} callback = {afterRender}>. 
</ReactHighcharts>

唯一的区别是一个使用 useRef 钩子，另一个有回调 prop

React Highcharts - 如何从父组件使用 drillUp？

React Highcharts - how to use drillUp from parent component?

reactjs

react-highcharts