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/