通过调用ajax api（json响应）创建amcharts
[英]Create amcharts by calling ajax api (json response)
问题描述
I'm trying to create amcharts by calling ajax api (response in json format), by calling post api i get the required data in console.log but chart is not showing. 
我正在尝试通过调用ajax api（以json格式响应），通过调用post api创建amcharts，我在console.log中获取了所需的数据，但图表未显示。 Pls check code, & suggest me what is missing. 请检查代码，并向我建议缺少的内容。 I'm using jquery & HTML only, If api is not working, so pls explain me with stuff data. 我仅使用jquery和HTML，如果api无法正常工作，请使用填充数据向我解释。
Can i achieve this by using dataLoader plugin fror amcharts? 我可以使用dataLoader插件或amcharts实现此目的吗？ If yes then pls explain me how it will achieve by using dataLoader. 如果是的话，请解释一下如何使用dataLoader实现。 Pls check my code & update me how to draw chart by json response first. 请检查我的代码并首先更新我如何通过json响应绘制图表。
Here is my working code 这是我的工作代码
$(function () {
$("[id*=btnok]").click(function () {
var obj = {};
obj = $.trim($("[id*=nodays]").val());
console.log(obj)
$.ajax({
type: "POST",
"headers": {
"content-type": "application/json",
"cache-control": "no-cache"
},
url: "http://10.26.32.4/api/rating-service/rate/ridecount/days/",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
console.log(r)
AmCharts.makeChart("rides", {
"type": "serial",
"fixedColumnWidth": '10px',
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"minimum": 0,
"maximum": 50,
"gridCount": 1
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#47b012",
"lineColor": "#47b012",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Completed Rides",
"type": "column",
"color": "#000000",
"valueField": "completedTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#fff138",
"lineColor": "#fff138",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Not Ended",
"type": "column",
"color": "#000000",
"valueField": "activeTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#dd111b",
"lineColor": "#dd111b",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Canceled Rides",
"type": "column",
"color": "#000000",
"valueField": "cancelledTrip",
"fixedColumnWidth": 25
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "creationDate",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"labelRotation": 60
}
});
}
});
return false;
});
});
1 个解决方案
解决方案1
2 已采纳 2018-09-03 11:11:01
The dataLoader only supports GET requests, so it's not an option. dataLoader仅支持GET请求，因此不是一种选择。
The only thing I see wrong with your code is that you didn't assign your response to the chart's dataProvider . 我认为您的代码唯一的错误是您没有将响应分配给图表的dataProvider 。 Assuming your response is in the correct format (an array of objects): 假设您的回复采用正确的格式（对象数组）：
$.ajax({
type: "POST",
"headers": {
"content-type": "application/json",
"cache-control": "no-cache"
},
url: "http://10.26.32.4/api/rating-service/rate/ridecount/days/",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
console.log(r)
AmCharts.makeChart("rides", {
"type": "serial",
"fixedColumnWidth": '10px',
"dataProvider": r, //if your response is an array of objects, e.g. [{"completedTrip": .., "activeTrip: .., "cancelledTrip": .., "creationDate": ..}, ...]
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.3,
"gridAlpha": 0,
"minimum": 0,
"maximum": 50,
"gridCount": 1
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#47b012",
"lineColor": "#47b012",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Completed Rides",
"type": "column",
"color": "#000000",
"valueField": "completedTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#fff138",
"lineColor": "#fff138",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Not Ended",
"type": "column",
"color": "#000000",
"valueField": "activeTrip",
"fixedColumnWidth": 25
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillColors": "#dd111b",
"lineColor": "#dd111b",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Canceled Rides",
"type": "column",
"color": "#000000",
"valueField": "cancelledTrip",
"fixedColumnWidth": 25
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "creationDate",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20,
"labelRotation": 60
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.