在新的React图表中使用Highcharts Editor导出的数据

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";56n"February";60n"March";73n"April";55n"May";32n"June";14n"July";10n"August";10n"September";19n"October";40n"November";44n"December";47",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"chart": {},
"xAxis": { "title": { "text": "Month" }, "labels": {} },
"legend": {}
}

然后，我尝试将这些数据用作新的HighchartsReact组件的options

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";56n"February";60n"March";73n"April";55n"May";32n"June";14n"July";10n"August";10n"September";19n"October";40n"November";44n"December";47'
},
chart: {},
xAxis: [{ title: { text: "Month" }, labels: {} }],
legend: {}
};
export default function ChartContainer(props: HighchartsReact.Props) {
return <HighchartsReact highcharts={Highcharts} options={options} />;
}

但是，当我在浏览器中查看渲染组件时，轴和标题会被渲染，但数据不会显示。部分渲染图表的图像

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

在导出的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

Answer 2

我认为问题在于您试图调用/导出组件的方式。我试着在其他项目中使用你的选项，结果不出所料。