使用Ajax和Python返回Highcharts

Return Highcharts using Ajax and Python

本文关键字:返回 Highcharts Python Ajax 使用      更新时间:2023-09-26

我试图返回一个高图使用AJAX从python瓶web服务。web服务的代码:

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调用已经返回了所需的数据),但是图表没有被填充。不知道我哪里出错了。如果有人能指出这个错误就太好了。

不确定如何,但改变返回方法有帮助,也有一些JSON格式的变化。每个(, ' "")都很重要。更正后的代码如下:

@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格式jsonformter