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

Question

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

1. 使用 Highcharts Editor 创建图表
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": {}
}

然后我尝试使用这些数据作为新 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 可以用作新图表的选项，但我似乎遗漏了一些东西。

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

Answer 1

要使用CSV作为数据源，需要加载并初始化data模块:

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import dataModule from "highcharts/modules/data";

dataModule(Highcharts);

<小时/>

实例: https://codesandbox.io/s/highcharts-react-demo-e5v40w

API引用: https://api.highcharts.com/highcharts/data

文档: https://www.highcharts.com/docs/working-with-data/data-module