Я пытаюсь создать amcharts, вызывая ajax api (ответ в формате json), вызывая post api, я получаю необходимые данные в console.info, но диаграмма не отображается. Пожалуйста, проверьте код и предложите мне, что не хватает. Я использую только jquery и HTML. Если api не работает, пожалуйста, объясните мне данные.
Могу ли я добиться этого с помощью плагина dataLoader для amcharts? Если да, пожалуйста, объясните мне, как этого добиться с помощью dataLoader. Пожалуйста, проверьте мой код и сначала расскажите мне, как рисовать диаграмму с помощью ответа json.
Вот мой рабочий код
$(function () {
$("[id*=btnok]").click(function () {
var obj = {};
obj = $.trim($("[id*=nodays]").val());
console.info(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.info(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;
});
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


DataLoader поддерживает только запросы GET, поэтому это не вариант.
Единственное, что я считаю неправильным в вашем коде, это то, что вы не назначили свой ответ dataProvider диаграммы. Предполагая, что ваш ответ имеет правильный формат (массив объектов):
$.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.info(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
}
});