如何在Amcharts中迭代json对象

时间:2019-03-19 07:36:53

标签: javascript jquery json ajax amcharts

我的代码正在使用Amcharts。我使用ajax post api调用。我已经为数据创建了变量,但我希望它为它创建一个循环。
我正在尝试进行数据操作,但我无法做到。我想创建一个循环,在其中循环迭代json对象并推送到数组,然后将该数组提供给datatprovider来绘制图形
请检查我的代码,然后通知我,或者我可以通过其他任何方式实现。
这是我的代码:

var slot1 = [], Dride = [], Pride = [];
var object = {
  "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
  }]
}

object.driver_data.forEach(function(key) {
  slot1.push(key.slot);
  Pride.push(key.rideCount)
});

object.passenger_data.forEach(function(key) {
  slot1.push(key.slot);
  Dride.push(key.rideCount);
});

var myObj = {}, myObj1 = {}, myObj2 = {}, arr = [];

myObj["slot"] = slot1[0];
myObj["passenger_data"] = Pride[0];
myObj["driver_data"] = Dride[0];

myObj1["slot"] = slot1[1];
myObj1["passenger_data"] = Pride[1];
myObj1["driver_data"] = Dride[1];

myObj2["slot"] = slot1[2];
myObj2["passenger_data"] = Pride[2];
myObj2["driver_data"] = Dride[2];

arr.push(myObj, myObj1, myObj2)
console.log(JSON.stringify(arr))

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "fixedColumnWidth": '10px',
  "dataProvider": arr,
  "hideCredits": true,

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

0 个答案:

没有答案