Создавайте amcharts, вызывая ajax api (ответ json)

Я пытаюсь создать 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;
    });

});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
734
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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
                }
            });

Другие вопросы по теме