Question

我正在尝试从Highchart导出模块获取图像，并且它正在提供图像图表输入数据错误，语法错误：意外的EOF。

请参阅此js小提琴中的代码。

http://jsfiddle.net/GopinathGD/3xy8aeb7/

    $(function () {
    $("#b").click(testPOST);

    var exportUrl = 'http://export.highcharts.com/';

    function testPOST() {

        var dataStr= {
            "colors": [
               "#C00000"
            ],
            "chart": {
                "type": "bar"
            },
            "title": {
                "text": "Current Analysis Competitive Index",
                "style": {
                    "fontWeight": "bold",
                    "color": "rgba(164, 0, 31, 0.96)"
                }
            },
            "subtitle": {
                "text": "Source: © 2017 Current Analysis, Inc."
            },
            "xAxis": {
                "tickWidth": 1,
                "minPadding": 0,
                "maxPadding": 0,
                "categories": [
                   "Overall",
                   "Vision/Strategy",
                   "Momentum & Stability",
                   "Innovation",
                   "Product Portfolio",
                   "Go-to-Market",
                   "Service & Support"
                ],
                "title": {
                    "text": null
                },
                "labels": {
                    "style": {
                        "color": "#000000",
                        "fontWeight": "bold",
                        "fontSize": "12px"
                    }
                }
            },
            "yAxis": {
                "min": 0,
                "max": 10,
                "tickInterval": 1,
                "tickmarkPlacement": "off",
                "categories": [
                   "",
                   "Vulnerable",
                   "",
                   "Competitive",
                   "",
                   "Strong",
                   "",
                   "Very Strong",
                   "",
                   "Leader",
                   ""
                ],
                "title": {
                    "text": "",
                    "align": "high"
                },
                "labels": {
                    "style": {
                        "color": "#000000",
                        "fontWeight": "bold",
                        "fontSize": "12px"
                    }
                }
            },
            "plotOptions": {
                "bar": {
                    "dataLabels": {
                        "enabled": false
                    },
                    "pointpadding": 0,
                    "groupPadding": 0
                },
                "series": {
                    "animation": false,
                    "pointWidth": 9,
                    "pointPadding": 0,
                    "groupPadding": 0.1
                }
            },
            "legend": {
                "margin": 30
            },

            "series": [
               {
                   "name": "BlackBerry - Consumer Platforms and Devices",
                   "data": [
                      3,
                      3,
                      3,
                      3,
                      2,
                      6,
                      6
                   ]
               }
            ]
        };
        var optionsStr = JSON.stringify(dataStr),
        dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400');

        if (window.XDomainRequest) {
            var xdr = new XDomainRequest();
            xdr.open("post", exportUrl+ '?' + dataString);
            xdr.onload = function () {
                console.log(xdr.responseText);
                $('#container').html('<img src="' + exporturl + xdr.responseText + '"/>');
            };
            xdr.send();
        } else {
            $.ajax({
                type: 'POST',
                data: dataString,
                url: exportUrl,
                success: function (data) {
                    console.log('get the file from relative url: ', data);
                    $('#container').html('<img src="' + exportUrl + data + '"/>');
                },
                error: function (err) {
                    debugger;
                    console.log('error', err.statusText)
                }
            });
        }

    }
});


<script src="http://code.highcharts.com/highcharts.js"></script>

运行代码

Answer 1

原因是xAxis.categories中使用了两个＆符号。

"categories": [
  "Momentum & Stability",
  ...
  "Service & Support"
],

将＆符号更改为%26

"categories": [
           "Overall",
           "Vision/Strategy",
           "Momentum %26 Stability",
           "Innovation",
           "Product Portfolio",
           "Go-to-Market",
           "Service %26 Support"
        ],

创建一个对＆符号进行编码的回调（在服务器上调用回调）：

    function callback () {
      const categories = this.xAxis[0].categories.map(decodeURIComponent)
      this.xAxis[0].setCategories(categories)
    }

将回调附加到dataString：

 dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400&callback=' + callback.toString());

示例：http://jsfiddle.net/erayy8jn/

Highcharts导出模块给出错误

1 个答案: