我如何在 Amcharts 中使用 postProcess

Question

My code is using Amcharts with postProcess by calling ajax post api call. It gives me response in console.log but it won't create a graph from response.

I'm trying to do this but I didn't understand where I did wrong.

Please check my code and let me know, or can I achieve this any other way.

Here is my code:

$.ajax({
        url: "API-Link",
        data: {
            "api": "rs_slotcount",
            "params": "7"
        },
        type: "post",
        dataType: "json",
        success: function (result) {
            console.log(result)
            AmCharts.makeChart("slotridecounts", {
                "type": "serial",
                "fixedColumnWidth": '10px',
                "dataProvider": result,
                postProcess: function (jsonResponse, dataLoaderConfig, chart) {
                    var categoryField = chart.categoryField;
                    var newData = []; 
                    var groupedData = {};
                    Object.keys(jsonResponse).forEach(function (arrayKey) {
                        jsonResponse[arrayKey].forEach(function (dataItem) {
                            if (!groupedData[dataItem[categoryField]]) {
                                groupedData[dataItem[categoryField]] = {};
                                groupedData[dataItem[categoryField]][categoryField] =
                                    dataItem[categoryField];
                            }
                            groupedData[dataItem[categoryField]][arrayKey] = dataItem.rideCount;
                        });
                    });
                    Object.keys(groupedData).forEach(function (groupedKey) {
                        newData.push(groupedData[groupedKey]);
                    });
                    return newData;
                },
                complete: function (chart) {
                    var valueFields = chart.graphs.map(function (graph) {
                        return graph.valueField;
                    });
                    var maxValue = chart.dataProvider.reduce(function (maxValue, dataItem) {
                        var sum = valueFields.reduce(function (sum, valueField) {
                            return sum + dataItem[valueField];
                        }, 0);
                        return Math.max(maxValue, sum);
                    }, Number.MIN_VALUE);
                    chart.valueAxes.forEach(function (valueAxis) {
                        valueAxis.maximum = maxValue;
                        valueAxis.strictMinMax = true;
                    });
                    chart.validateData();
                },
                legend: {
                    horizontalGap: 10,
                    maxColumns: 1,
                    position: "right",
                    useGraphSettings: true,
                    markerSize: 10,
                    position: "top"
                },
                valueAxes: [{
                    gridColor: "#FFFFFF",
                    gridAlpha: 0.2,
                    dashLength: 0
    }],
                gridAboveGraphs: true,
                startDuration: 1,

                valueAxes: [{
                    stackType: "regular",
                    axisAlpha: 0.3,
                    gridAlpha: 0,
                    minimum: 0,
                    maximum: 100,
                    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: "Driver",
                        type: "column",
                        color: "#000000",
                        valueField: "driver_data",
                        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: "Passenger",
                        type: "column",
                        color: "#000000",
                        valueField: "passenger_data",
                        fixedColumnWidth: 25
        }
    ],
                chartCursor: {
                    categoryBalloonEnabled: false,
                    cursorAlpha: 0,
                    zoomable: true
                },
                categoryField: "slot",
                categoryAxis: {
                    gridPosition: "start",
                    gridAlpha: 0,
                    tickPosition: "start",
                    tickLength: 20,
                    labelRotation: 80,
                    labelFunction: function (valueText, dataItem, categoryAxis) {
                        if (valueText.length < 3) {
                            return valueText;
                        } else {
                            return valueText.replace(/(00|30)$/, ":$1");
                        }
                    }
                }
            });
        }
    });

Ajax response

    {
    "driver_data": [
        {
            "slot": 0,
            "rideCount": 0
        },
        {
            "slot": 30,
            "rideCount": 0
        },
        {
            "slot": 100,
            "rideCount": 0
        }
    ],
    "passenger_data": [
        {
            "slot": 0,
            "rideCount": 0
        },
        {
            "slot": 30,
            "rideCount": 0
        },
        {
            "slot": 100,
            "rideCount": 0
        }
    ]
}

Answer 1

 var obj = { "driver_data": [{ "slot": 0, "rideCount": 98 }, { "slot": 30, "rideCount": 75 }, { "slot": 100, "rideCount": 0 }], "passenger_data": [{ "slot": 0, "rideCount": 33 }, { "slot": 30, "rideCount": 56 }, { "slot": 100, "rideCount": 37 }] } let { driver_data, passenger_data } = obj; const output = Array.from({ length: driver_data.length }, (_, i) => { return { Slot: driver_data[i].slot, driver_data: driver_data[i].rideCount, passenger_data: passenger_data[i].rideCount } }) AmCharts.makeChart("chartdiv", { "type": "serial", "fixedColumnWidth": '10px', "dataProvider": output, "hideCredits": true, postProcess: function(jsonResponse, dataLoaderConfig, chart) { var categoryField = chart.categoryField; //get the chart's category field var newData = []; //final data output var groupedData = {}; //stores the grouped data as a map before converting to an array //iterate through each array in your JSON response and pull out every //slot and rideCount value into a separate object, grouped by slot value Object.keys(jsonResponse).forEach(function(arrayKey) { //put each slot/rideCount into an object/map item based on slot value jsonResponse[arrayKey].forEach(function(dataItem) { if (!groupedData[dataItem[categoryField]]) { groupedData[dataItem[categoryField]] = {}; groupedData[dataItem[categoryField]][categoryField] = dataItem[categoryField]; } groupedData[dataItem[categoryField]][arrayKey] = dataItem.rideCount; }); }); //go through groupedData mapping and convert back into an array Object.keys(groupedData).forEach(function(groupedKey) { newData.push(groupedData[groupedKey]); }); return newData; }, complete: function(chart) { //get valueFields var valueFields = chart.graphs.map(function(graph) { return graph.valueField; }); //find the maximum stack in each category var maxValue = chart.dataProvider.reduce(function(maxValue, dataItem) { var sum = valueFields.reduce(function(sum, valueField) { return sum + dataItem[valueField]; }, 0); return Math.max(maxValue, sum); }, Number.MIN_VALUE); //update each value axis' maximum and set strictMinMax to true chart.valueAxes.forEach(function(valueAxis) { valueAxis.maximum = maxValue; valueAxis.strictMinMax = true; }); //update chart chart.validateData(); }, legend: { horizontalGap: 10, maxColumns: 1, position: "right", useGraphSettings: true, markerSize: 10, position: "top" }, valueAxes: [{ gridColor: "#FFFFFF", gridAlpha: 0.2, dashLength: 0 }], gridAboveGraphs: true, startDuration: 1, valueAxes: [{ stackType: "regular", axisAlpha: 0.3, gridAlpha: 0, minimum: 0, maximum: 100, 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: "Driver", type: "column", color: "#000000", valueField: "driver_data", 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: "Passenger", type: "column", color: "#000000", valueField: "passenger_data", fixedColumnWidth: 25 } ], chartCursor: { categoryBalloonEnabled: false, cursorAlpha: 0, zoomable: true }, categoryField: "Slot", categoryAxis: { gridPosition: "start", gridAlpha: 0, tickPosition: "start", tickLength: 20, labelRotation: 80, labelFunction: function(valueText, dataItem, categoryAxis) { if (valueText.length < 3) { return valueText; } else { return valueText.replace(/(00|30)$/, ":$1"); } } } });

 #chartdiv { #chartdiv { width: 100%; height: 500px; font-size: 11px; } width: 100%; height: 500px; font-size: 11px; } .amcharts-graph-graph2 .amcharts-graph-stroke { stroke-dasharray: 4px 5px; stroke-linejoin: round; stroke-linecap: round; -webkit-animation: am-moving-dashes 1s linear infinite; animation: am-moving-dashes 1s linear infinite; } @-webkit-keyframes am-moving-dashes { 100% { stroke-dashoffset: -28px; } } @keyframes am-moving-dashes { 100% { stroke-dashoffset: -28px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/serial.js"></script> <div id="chartdiv"></div>