Highcharts导出服务器：极坐标图在回调中忽略格式化程序

我们目前正在HighCharts中生成一个极坐标图，该极坐标图在客户端（在浏览器中）正确渲染，并将格式化程序正确应用于xAxis、yAxis和plotOptions。下面是一个JSFIDLE，它显示了如何（正确地）在浏览器中呈现：

在服务器端，我们正在构造一个JSON负载，并将其发送到节点导出服务器实例，然后返回一个PNG。根据我们的研究，很明显格式化程序需要包含在JSON有效负载的

回调

键中，并作为字符串传递给服务器，而不是

填充

键中

这很好，因此我们将格式化程序函数转换为字符串，将它们组合成

回调

键中的

选项

对象，然后在

回调

键的末尾重新绘制图表

这种方法适用于非极坐标图表，但如果导出服务器从导出服务器返回有效的PNG，则该图表不会将格式化程序功能应用于xAxis、yAxis或plotOptions.series

下面是我们发送到节点导出服务器实例的JSON负载：

{
    "callback": "function (chart) {var options = chart.options;var xAxisFormatter = function () { var extra_hrs = 0; if (this.value == 0) { extra_hrs = 12; }; return ((this.value / 0.5)/60) + extra_hrs + ':00'; };if (\"labels\" in options[\"xAxis\"]) { options[\"xAxis\"][\"labels\"][\"formatter\"] = xAxisFormatter; } else { options[\"xAxis\"][\"labels\"] = { \"formatter\": xAxisFormatter, \"style\": { \"fontSize\": \"8px\" } }; };var yAxisFormatter = function () { return Highcharts.numberFormat(this.value, 2, '.', ',') + \"%\"; };if (\"labels\" in options[\"yAxis\"]) { options[\"yAxis\"][\"labels\"][\"formatter\"] = yAxisFormatter; } else { options[\"yAxis\"][\"labels\"] = { \"formatter\": yAxisFormatter, \"style\": { \"fontSize\": \"8px\" } };};var plotOptionsFormatter = function () { return Highcharts.numberFormat(this.value, 2, '.', ',') + \"%\"; };options[\"plotOptions\"][\"series\"][\"dataLabels\"][\"formatter\"] = plotOptionsFormatter;chart = new Highcharts.chart(chart.container, options);chart.redraw();}",
    "infile": "{chart: {backgroundColor: \"white\", borderWidth: 0, height: 300, polar: true, width: 300}, colors: [\"#16C1F3\", \"#3C6E71\", \"#EAC435\", \"#E63946\", \"#33658A\", \"#DFD6A7\", \"#627264\", \"#86CCA5\", \"#6268B0\", \"#E8D33F\", \"#DA2C38\"], credits: {enabled: false, position: {align: \"right\", verticalAlign: \"bottom\"}, text: \"(c) Insight Industry Inc., 2017.\"}, exporting: {enabled: false}, legend: {enabled: false}, plotOptions: {column: {groupPadding: 0, pointPadding: 0}, series: {dataLabels: {}, pointInterval: 30, pointStart: 0}}, series: [{data: [{name: \"12:00am - 4:59am\", x: 0, y: 2.737994945240101}, {name: \"5:00am - 5:29am\", x: 150, y: 1.6287559674248806}, {name: \"5:30am - 5:59am\", x: 165, y: 1.6849199663016006}, {name: \"6:00am - 6:29am\", x: 180, y: 5.9112608817747825}, {name: \"6:30am - 6:59am\", x: 195, y: 11.513619769727605}, {name: \"7:00am - 7:29am\", x: 210, y: 17.98652064026959}, {name: \"7:30am - 7:59am\", x: 225, y: 17.733782645324347}, {name: \"8:00am - 8:29am\", x: 240, y: 20.190957596180848}, {name: \"8:30am - 8:59am\", x: 255, y: 7.848918843021623}, {name: \"9:00am - 9:59am\", x: 270, y: 8.438640831227183}, {name: \"10:00am - 10:59am\", x: 300, y: 3.1592249368155008}, {name: \"11:00am - 11:59am\", x: 330, y: 1.1654029766919405}], name: null, pointPlacement: \"on\", type: \"column\"}], title: {text: null}, tooltip: {style: {fontSize: \"10px\"}, valueDecimals: 1, valueSuffix: \"%\"}, xAxis: {labels: {style: {fontSize: \"10px\"}}, max: 360, min: 0, tickInterval: 30, title: {text: null}}, yAxis: {labels: {style: {fontSize: \"10px\"}}, max: 25.0, min: 0, showLastLabel: false, tickInterval: 5, title: {style: {color: \"#0A3B61\", fontSize: \"9px\", fontWeight: \"bold\"}, text: \"Workers, Aged 25+\"}}}",
    "scale": 2,
    "type": "png"
}

我们重新创建了我们（怀疑）的节点导出服务器所经历的过程，并且明确地重新创建了我们在这个JSFIDLE中看到的（奇怪的）行为：

我们是否遗漏了一些显而易见的东西（这是我们所怀疑的）？还是有更好的方法来达到我们想要的行为

---

任何帮助都将不胜感激

在处理可疑进程的过程中，以及在回调中，您将按照以下方式设置轴标签：

options["yAxis"]["labels"]

这将在

yAxis

元素上设置一个对象

labels

，但是，由于在highcharts中可以有多个轴，因此它们会被索引，并以这样的方式存储。这意味着您必须像这样编辑第一个轴：

options["yAxis"][0]["labels"]

以下是yAxis对象在不正确的配置中的图片：

以下是处于正确配置的yAxis对象的图片：

使用副手的工作示例：