如何在 Amcharts 中使用 postProcess

Question

我的代码通过调用 ajax post api 调用将 Amcharts 与 postProcess 一起使用。它在 console.log 中给了我响应，但它不会从响应中创建图表。

我正在尝试这样做，但我不明白我在哪里做错了。

请检查我的代码并告诉我，或者我可以通过其他任何方式实现这一点。

这是我的代码：

$.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 响应

    {
    "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>