使用Ajax和Python返回Highcharts

我想從python瓶web服務返回使用AJAX的高圖。 Web服務的代碼：使用Ajax和Python返回Highcharts

app.get('/getmyname/<jsonstring>') 
def getmyname(db, jsonstring): 

ret = """{ 
      "chart": { 
       "type": "column" 
      }, 
      "colors": [ 
        "#00B7DE" 
        "#00539E" 
        ], 
      "title": { 
       "text": "SALES - VOLUME" 
      }, 
      "xAxis": { 
       "categories": [w,w,w,w,w,w,w,w,w,w,w,w,w,w], 
       "tickLength": "0" 
      }, 

      "yAxis": { 
       "gridLineWidth": 0, 
       "minorGridLineWidth": 0, 
       "min": 0, 
       "title": { 
        "text": "K UNITS" 
       }, 
       "labels": { 
        "enabled": false 
       }, 

       "stackLabels": { 
        "enabled": true, 
        "style": { 
         "fontWeight": "bold", 
         "color": "(Highcharts.theme && Highcharts.theme.textColor) || 'gray'" 
        } 
       } 
      }, 
      "credits": { 
       "enabled": false 
      }, 
      "legend": { 
       "align": "right", 
       "x": "-30", 
       "verticalAlign": "top", 
       "y": "25", 
       "floating": true, 
       "backgroundColor": "(Highcharts.theme && Highcharts.theme.background2) || 'white'", 
       "borderColor": "#CCC", 
       "borderWidth": "1", 
       "shadow": true, 
      }, 
      "tooltip": { 
       "formatter": function() { 
        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 
         'Total: ' + this.point.stackTotal; 
       } 
      }, 
      "plotOptions": { 
       "column": { 
        "stacking": "normal", 
        "dataLabels": { 
         "enabled": true, 
         "color": "(Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'", 
         "style": { 
          "textShadow": "0 0 3px black" 
          } 
        } 
       } 
      }, 
      "series": [{ 
       "name": "EST", 
       "data": [1, 4, 2, 6, 5, 8, 3, 6, 1, 2, 8, 3, 4],     
      }, { 
       "name": "VOD", 
       "data": [1, 4, 2, 6, 5, 8, 3, 6, 1, 2, 8, 3, 4] 
      }] 
     }"""; 

return json.dumps(ret)

AJAX調用：

$.ajax({ 

     type: "GET", 
     url: "http://localhost:8080/getmyname/Query", 
     data: JSON.stringify(output), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 

     success: function(data){ 
           alert(data) ; 
           $('#container').highcharts(data); 
           }, 
     error: function() { 
          alert("Something is not OK")  
           }, 

     });

雖然我可以看到返回成功警報（由於我以爲Ajax調用返回所需的數據）時，圖表不會填充。不知道我哪裏錯了。如果有人能指出錯誤，那將是非常好的。

來源

2015-06-09 Tauseef Hussain

首先，屬性'tooltip.formatter'是一個函數，這使得它的無效JSON。另請嘗試將您的JSON數據粘貼到http://jsonblob.com/。你會看到有很少的無效字符串 – Dhiraj

試圖將函數包含在一個變量中，並沒有幫助。 –

JSON不能包含函數 - 刪除它們。你的分類是錯誤的。你的「顏色」選項根本不起作用（可能會使用黑色）。此外，不要忘記從JavaScript控制檯複製和粘貼錯誤。 –

不知道如何，但改變返回方法有幫助，也有一些與JSON格式的變化。每個(, ' "")都很重要。更正後的代碼是bleow：

@app.get('/getmyname/<jsonstring>') 
def getmyname(db, jsonstring): 


ret = """{ 
    "chart": { 
     "type": "column" 
     }, 
    "colors": [ 
      "#00B7DE", 
      "#00539E" 
      ], 
    "title": { 
     "text": "SALES - VOLUME" 
    }, 
    "xAxis": { 
     "categories": ["Avg", "W", "W", "W", "W", "W", "W", "W", "W", "W", "W", "W", "W"], 
     "tickLength": 0 
    }, 
    "yAxis": { 
     "gridLineWidth": 0, 
     "minorGridLineWidth": 0, 
     "min": 0, 
     "title": { 
      "text": "K EURO" 
     }, 
     "labels": { 
      "enabled": false 
     }, 
     "stackLabels": { 
      "enabled": true, 
      "style": { 
       "fontWeight": "bold", 
       "color": "gray" 
      } 

     } 
    }, 
    "credits": { 
     "enabled": false 
    }, 

    "legend": { 
     "align": "right", 
     "x": -30, 
     "verticalAlign": "top", 
     "y": 25, 
     "floating": true, 
     "backgroundColor": "white", 
     "borderColor": "#CCC", 
     "borderWidth": 1, 
     "shadow": true 
    }, 
    "plotOptions": { 
     "column": { 
      "stacking": "normal", 
      "dataLabels": { 
       "enabled": true, 
       "color": "white", 
       "style": { 
        "textShadow": "0 0 3px black" 
       } 
      } 
     } 
    }, 
    "series": [{ 
     "name": "EST", 
     "data": [5, 3, 4, 7, 2, 4, 7, 3, 4, 1, 6, 2, 2] 
    }, { 
     "name": "VOD", 
     "data": [2, 2, 3, 2, 1, 3, 5, 3, 4, 7, 2, 4, 5] 
    }] 
    }""" 

return json.loads(ret)

編輯：我發現這個工具來調試JSON格式非常有幫助JSONFormtter

來源

2015-06-11 09:28:09

使用Ajax和Python返回Highcharts

回答

相關問題