Question

我正在使用Highcharts Export Server作为Node.js模块来生成PNG格式的图表。但是，当我包括可变半径饼图时，在生成的文件中出现错误。错误是Highcharts错误＃17：

请求的系列类型不存在。 当您将chart.type或series.type设置为Highcharts中未定义的系列类型时，会发生此错误。一个典型的原因可能是您缺少定义系列类型的扩展文件，例如，要运行一个Arearange系列，您需要加载highcharts-more.js文件。

我使用的图表是highcharts-more模块的一部分，因此该错误是有道理的。我什至找到了似乎能说明我解决方案的文档。 Thre是一个resources选项，您可以在其中提供用于注入到导出的脚本。该页面为here，但我将在下面包括以下重要内容：

-资源

{ 
    "files": "highstock.js,highcharts-more.js,data.js,drilldown.js,funnel.js,heatmap.js,treemap.js,highcharts-3d.js,no-data-to-display.js,map.js,solid-gauge.js,broken-axis.js", 
    "css": "g.highcharts-series path {stroke-width:2;stroke: pink}", 
    "js": "document.body.style.webkitTransform = \"rotate(-10deg)\";" 
}

文件：逗号分隔的文件名字符串，需要将其插入页面以呈现图表。仅注入扩展名为.css和.js的文件，其余文件将被忽略。
css：插入页面正文中的css
js： javascript

经过一些挖掘，我确实发现我可以将此资源选项作为JSON字符串对象传递到我的导出参数中。因此，我尝试注入highcharts-more.js的远程版本。

const exportImagesBase64 = async(data, format = 'png') => {
  HighchartsExport.initPool();

  let resources = JSON.stringify({
    files: "http://code.highcharts.com/highcharts-more.js"
  });

  let charts = data.map(chart => exportPromise({
    type: format, //png
    options: chart, //standard highcharts config object
    resources //resources option to inject highcharts-more
  }));

  charts = await Promise.all(charts);

  HighchartsExport.killPool();

  return charts;
};

const exportPromise = (data) => {
  return new Promise((resolve, reject) => {
    HighchartsExport.export(data, (err, res) => err ? reject(err) : resolve(res));
  });
};

下面是一个示例，上面的代码中data可能等于

[{
    "chart": {
      "plotBackgroundColor": null,
      "plotBorderWidth": null,
      "plotShadow": false,
      "type": "variablepie",
      "height": 300,
      "width": 300
    },
    "title": {
      "text": "Placement Breakdown",
      "align": "left",
      "x": 30,
      "y": 30
    },
    "tooltip": {
      "headerFormat": "",
      "pointFormat": "<b> {point.name}</b><br/>Impressions: <b>{point.y}</b><br/>Clicks: <b>{point.z}</b><br/>"
    },
    "plotOptions": {
      "pie": {
        "allowPointSelect": true,
        "cursor": "pointer",
        "dataLabels": {
          "enabled": false
        },
        "showInLegend": true
      }
    },
    "series": [
      {
        "minPointSize": 10,
        "innerSize": "20%",
        "zMin": 0,
        "data": [
          {
            "name": "facebook",
            "y": 13642,
            "z": 357
          },
          {
            "name": "instagram",
            "y": 12920,
            "z": 326
          }
        ]
      }
    ],
    "credits": {
      "enabled": false
    }
  }]

由于添加了资源选项，我仍然收到＃17 Highcharts错误。我在想这是完全错误的吗？我找不到关于此的更多信息，所以我希望有人能分享一些知识。

Answer 1

documentation for the variable pie chart type指的是highcharts-more.js。

此图表类型的实际要求似乎为modules/variable-pie.js。相反，使用此额外资源应该可以解决导出时“请求的序列类型不存在”的问题。

使用highcharts-export-server

1 个答案: