Javascript 使用Ajax和Python返回Highcharts

我正在尝试使用AJAX从python瓶子web服务返回highchart。 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调用返回了所需的数据），但图表没有填充。我不知道我会错在哪里。如果有人能指出错误，那就太好了。

不知道如何，但是更改返回方法有帮助，而且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)     

@app.get（'/getmyname/'））
def getmyname（db、jsonstring）：
ret=”“”{
“图表”：{
“类型”：“列”
},
“颜色”：[
“#00B7DE”，
“#00539E”
],
“标题”：{
“正文”：“销售量”
},
“xAxis”：{
“类别”：[“平均”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”、“W”]，
“滴答声长度”：0
},
“yAxis”：{
“网格线宽”：0，
“minorGridLineWidth”：0，
“min”：0，
“标题”：{
“文本”：“K欧元”
},
“标签”：{
“已启用”：false
},
“堆叠标签”：{
“启用”：正确，
“风格”：{
“字体权重”：“粗体”，
“颜色”：“灰色”
}
}
},
“学分”：{
“已启用”：false
},
“传奇”：{
“对齐”：“右”，
“x”：-30，
“垂直对齐”：“顶部”，
“y”：25，
“浮动”：没错，
“背景色”：“白色”，
“边框颜色”：“CCC”，
“边界宽度”：1，
“影子”：真的吗
},
“打印选项”：{
“列”：{
“堆叠”：“正常”，
“数据标签”：{
“启用”：正确，
“颜色”：“白色”，
“风格”：{
“textShadow”：“0 0 3px黑色”
}
}
}
},
“系列”：[{
“名称”：“EST”，
“数据”：[5,3,4,7,2,4,7,3,4,1,6,2,2]
}, {
“名称”：“视频点播”，
“数据”：[2,2,3,2,1,3,5,3,4,7,2,4,5]
}]
}"""   
返回json.loads（ret）

---

编辑：我发现这个工具对调试JSON格式非常有帮助。首先，属性

工具提示。格式化程序
是一个函数，这使它成为无效的JSON。还可以尝试将JSON数据粘贴到。您将看到，在变量中包含函数的无效stringsTried很少，也没有帮助。JSON不能包含函数-请删除它们。您的
类别
错误。您的
颜色
选项根本不起作用（可能会使用黑色）。另外，别忘了从javascript控制台复制和粘贴错误。@PawełFus更改了类别（我假设您指出了额外的“w”）。删除的功能和颜色以及，仍然没有去。问题是javascript控制台中没有错误，我不明白为什么。请确保您的div带有
id=“container”
。对于类别，我的意思是
类别：[w，w，w，…，w]
是错误的。应该是：
类别：[“w”、“w”、“w”、“w”、…、“w”]
。
@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)