使用Ajax和Python返回Highcharts
Return Highcharts using Ajax and Python
我试图返回一个高图使用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
相关文章:
- 节点导出返回一个空对象
- ES6构造函数返回基类的实例
- 监视函数从服务返回不起作用,但作用域函数起作用
- 控制台返回var不是't定义,但它是
- 从函数返回角度承诺
- Javascript返回值只在循环中返回一次
- 从控制器返回后Ajax启动事件激发
- CKFinder 3为所选文件返回错误的URL
- 使用共享工具提示时,单击Highcharts柱形图会返回不正确的序列索引
- Highcharts numberFormat返回负零
- Highcharts点击事件返回“;悬停”;state而不是“state”;选择“;状态
- 使用函数返回plotLine上的值[HighCharts]
- Highcharts的getExtremes函数无法返回正确的dataMax
- 获取 Highcharts 工具提示以返回角度指令
- Highcharts'这'返回同一对象两次
- Highcharts工具提示格式化器返回函数抛出未捕获的TypeError: j.i call不是函数
- 使用Ajax调用返回JSON文件的Highcharts
- 使用templeteUrl让Highcharts工具提示返回一个angular指令
- 使用Ajax和Python返回Highcharts
- Highcharts——这一点.类别返回未定义