Question

我们目前正在HighCharts中生成极坐标图表，可以在客户端（在浏览器中）正确呈现，并正确地将格式化程序应用于xAxis，yAxis和plotOptions。这是一个jsFiddle，它显示了它在浏览器中的呈现方式（正确）：https://jsfiddle.net/cmodzelewski/38f03Lse/1/

在服务器端，我们正在构建一个JSON有效负载并将其发送到node-export-server实例并返回一个PNG。根据我们的研究，很明显格式化程序需要包含在JSON有效负载的callback密钥中，并作为字符串传递给服务器，而不是infile密钥。

没问题，所以我们将格式化程序函数转换为字符串，将它们组合到options键中的callback对象中，然后重新绘制图表。我们的callback密钥的结尾。

此方法适用于非极坐标图，但如果polar == true导出服务器从导出服务器返回有效的PNG，则该图表不会将格式化程序函数应用于xAxis，yAxis或plotOptions。系列。

以下是我们发送到节点导出服务器实例的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"
}

我们重新创建了我们（怀疑）节点导出服务器经历的过程，并且肯定重新创建了我们在这个jsFiddle中看到的（奇怪的）行为：https://jsfiddle.net/cmodzelewski/v4gm6t9a/2/

我们是否遗漏了一些明显的东西（这是我们怀疑的）？或者是否有更好的方法来实现我们正在寻找的行为？

非常感谢任何帮助！

Answer 1

在您的疑似过程中，在您的回调中，您将按以下方式设置轴标签：

options["yAxis"]["labels"]

这将在labels元素上设置一个对象yAxis，但是，由于您可以在高图中使用多个轴，因此将它们编入索引并存储。这意味着你必须像这样编辑第一个轴：

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

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

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

使用您的第二个小提琴的工作示例： https://jsfiddle.net/ewolden/v4gm6t9a/4/

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

1 个答案: