如何用highcharts-react-official绘制多数据highcharts树状图？

Question

如何用 highcharts-react-official 绘制树形图？ 我正在尝试在包装我的树状图的容器中绘制我的数据，但由于某种原因，地图显示不佳。

这就是我的树状图的样子。如果图表从服务器获取更多数据，那么树图就会变得密集，这样我就根本看不到树图数据了。

为了确保这是关于我的 ChartContainer 的代码。

const Treemap = () => {
  HighchartsTreemap(Highcharts);
  const { countryData } = useCountryData();

  const options = {
    title: {
      text: "",
    },
    series: [
      {
        type: "treemap",
        layoutAlgorithm: "squarified",
        layoutStartingDirection: "horizontal",
        alternateStartingDirection: true,
        data: [
          { name: "Belgium", value: "1" },
          { name: "Bulgaria", value: "2" },
          { name: "China", value: "8" },

        ],
      },
    ],
  };

  return (
    <Container>
      <ChartContainer>
        <HighchartsReact highcharts={Highcharts} options={options} />
      </ChartContainer>
    </Container>
  );
};

我需要为选项添加什么吗？

Answer 1

使用

highcharts-react-official

在图表选项上没有区别。您唯一需要改进的是数据中的价值类型。

value

需要是数字，而不是字符串。

  series: [{
    ...,
    data: [{
        name: "Belgium",
        value: 1
      },
      {
        name: "Bulgaria",
        value: 2
      },
      {
        name: "China",
        value: 8
      }
    ]
  }]

---

现场演示： https://jsfiddle.net/BlackLabel/9dr0xL12/

文档： https://www.highcharts.com/docs/chart-and-series-types/treemap