ReactJs 中的 Highcharts 网络图（强制定向图）

Question

这里有 highcharts，它没有显示我的网络图。我已将数据传递到 RouteMap 组件中，此数据是在 RouteData.js.

中创建的

在 App.js 中，您会看到我正在处理数据以形成 highcharts 所需的排列，例如：

[ [firstIndex, secondIndex], [firstIndex, secondIndex], ... ]

这是代码：

const mapStation = () => {
    let arr = [];
    for (let i = 0; i < routeData.length; i++) {
      const route = routeData[i].station;
      for (let j = 0; j < route.length; j++) {
        const station = route[j];
        const nextStation = route[j + 1];
        if (nextStation)
          arr.push([station.stationName, nextStation.stationName]);
      }
    }
    return arr;
  };

我写这段代码的时候其实很想用.map()。但是我在使用它的时候遇到了很多错误。有什么方法可以缩短上面的代码吗？

这是我的code sandbox，如果您不清楚问题，请告诉我。问题是我的网络图（强制有向图在我将数据传递给它后没有显示。数据排列根据highcharts规则是正确的，我也双重确认数据已成功作为参数传递给它。请帮我检查那里发生的任何错误。

Answer 1

routeData好像不是数组，可以循环遍历

试试这个代码，没有这个循环：

  const mapStation = () => {
    let arr = [];
    const route = routeData.station;
    for (let j = 0; j < route.length; j++) {
      const station = route[j];
      const nextStation = route[j + 1];
      if (nextStation) arr.push([station.stationName, nextStation.stationName]);
    }
    console.log("test", arr);
    return arr;
  };

演示：https://codesandbox.io/s/react-highcharts-error-forked-w20gx

ReactJs 中的 Highcharts 网络图（强制定向图）

Highcharts Network Graph (Forced Directed Graph) in ReactJs

highcharts

reactjs

react-highcharts