且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

通过调用ajax api(json响应)创建amcharts

更新时间:2022-06-24 23:15:05

dataLoader仅支持GET请求,因此不是一种选择.

The dataLoader only supports GET requests, so it's not an option.

我唯一看到的代码错误是您未将响应分配给图表的dataProvider.假设您的回复格式正确(对象数组):

The only thing I see wrong with your code is that you didn't assign your response to the chart's 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
                }
            });