在新的 React 图表中使用从 Highcharts 编辑器导出的数据

Question

我正在尝试实现以下工作流程

1. 使用 Highcharts 编辑器创建图表
2. 从表示图表的编辑器中导出 JSON 对象
3. 使用导出的 JSON 渲染新图表

当我通过编辑器创建图表并导出 JSON 时，我得到以下信息：

{
  "title": { "text": "Geese Throughout the Year" },
  "subtitle": { "text": "An exercise in passive observation" },
  "exporting": {},
  "yAxis": { "title": { "text": "Number of Geese" }, "labels": {} },
  "series": [{ "name": "Geese", "turboThreshold": 0, "marker": {} }],
  "plotOptions": { "series": { "animation": false } },
  "data": {
    "csv": "\"Month\";\"Geese\"\n\"January\";56\n\"February\";60\n\"March\";73\n\"April\";55\n\"May\";32\n\"June\";14\n\"July\";10\n\"August\";10\n\"September\";19\n\"October\";40\n\"November\";44\n\"December\";47",
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false
  },
  "chart": {},
  "xAxis": { "title": { "text": "Month" }, "labels": {} },
  "legend": {}
}

然后我尝试将此数据用作 options 用于新的 HighchartsReact 组件

import * as React from "react";
import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

var options = {
  title: { text: "Geese Throughout the Year" },
  subtitle: { text: "An exercise in passive observation" },
  exporting: {},
  yAxis: [{ title: { text: "Number of Geese" }, labels: {} }],
  series: [{ name: "Geese", turboThreshold: 0, marker: {} }],
  plotOptions: { series: { animation: false } },
  data: {
    csv:
      '"Month";"Geese"\n"January";56\n"February";60\n"March";73\n"April";55\n"May";32\n"June";14\n"July";10\n"August";10\n"September";19\n"October";40\n"November";44\n"December";47'
  },
  chart: {},
  xAxis: [{ title: { text: "Month" }, labels: {} }],
  legend: {}
};

export default function ChartContainer(props: HighchartsReact.Props) {
  return <HighchartsReact highcharts={Highcharts} options={options} />;
}

但是当我在浏览器中查看渲染的组件时，轴和标题都渲染了，但是数据没有出现。 Image of partially-rendered chart

我假设导出的 JSON 可以用作新图表的options，但我似乎遗漏了一些东西。

在导出的 JSON 和传递给新图表的选项之间是否需要执行某种额外的映射步骤？

Answer 1

我认为问题在于您尝试调用/导出组件的方式。我尝试在其他项目上使用您的选项，它按预期工作。