HighCharts-NG如何从JSON响应中加载数据

Question

highcharts-ng似乎可用于静态数据，但与动态数据无效。我的两个数据集都相似，但是图表在使用动态创建时拒绝渲染。

这是我的控制器代码：

$scope.sent_array = [];
$scope.success_array = [];
$scope.failed = [];
$scope.table_data = [];
$scope.date_array = [];
$scope.dateRangeTransactions = function() {
  ApiService.dateRange(payload).then(function(response) {
    data = response.data;
    console.log(data);
    for (var i = 0; i < data.length; i++) {
      date = data[i].date.replace(///g, ",").split(",");
      unix_date = Date.UTC(date[0], date[1] - 1, date[2]);
      console.log(unix_date);
      $scope.sent_array.push([unix_date, data[i].total_sent]);
      $scope.success_array.push([unix_date, data[i].total_success]);
      $scope.failed.push([unix_date, data[i].total_pending_failed]);
      $scope.table_data.push([data[i].date, data[i].total_sent, data[i].total_success, data[i].total_pending_failed]);
      $scope.date_array.push(data[i].date);
    }
    $scope.minDate = $scope.date_array[0];
    $scope.maxDate = $scope.date_array[$scope.date_array.length - 1];
    console.log($scope.sent_array);
    console.log($scope.success_array);
    console.log($scope.failed);
    $scope.chartConfig.series[0].data = $scope.sent_array;
    $scope.chartConfig.series[1].data = $scope.success_array;
    $scope.chartConfig.series[2].data = $scope.failed;

  }, function(error) {
    console.log(error);
  });
}
$scope.dateRangeTransactions(payload);
$scope.chartConfig = {
  global: {
    useUTC: false,
  },
  chart: {
    type: 'column',
    height: 500,
    width: 900,
    backgroundColor: 'transparent',
    zoomType: 'x',
  },
  navigator: {
    enabled: false,
    series: {
      data: []
    }
  },
  rangeSelector: {
    enabled: true,
  },
  plotOptions: {
    series: {
      lineWidth: 1,
      fillOpacity: 0.5,
      showInNavigator: true
    }
  },
  exporting: false,
  xAxis: [{
    type: 'datetime',
    title: {
      text: 'timeline',
      style: {
        color: '#80a3ca'
      }
    },
  }],
  yAxis: [
    {
      min: 0,
      allowDecimals: false,
      title: {
        text: 'rate of usage',
        style: {
          color: '#80a3ca'
        }
      },
      labels: {
        format: '{value}',
        style: {
          color: '#80a3ca'
        }
      }
    }
  ],
  legend: {
    enabled: true
  },
  title: {
    text: ' '
  },
  credits: {
    enabled: false
  },
  loading: true,
  tooltip: {
    headerFormat: '<div class="header">{point.key}</div>',
    pointFormat: '<span style="color:{point.color}">u25CF</span> {series.name}: <b>{point.y}</b><br/>',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#a4a4a4',
    shadow: true,
    useHTML: true,
    percentageDecimals: 2,
    backgroundColor: "rgba(255,255,255,.7)",
    style: {
      padding: 0
    },
    shared: true,
  },
  series: [{
      id: 'Sent',
      name: 'Sent',
      data: [],
      tooltip: {
        valueSuffix: ' times'
      },
      color: 'blue'
    },
    {
      id: 'Delivered',
      name: 'Delivered',
      data: [],
      tooltip: {
        valueSuffix: ' times'
      },
      color: 'green'
    },
    {
      id: 'Failed',
      name: 'Failed',
      data: [],
      tooltip: {
        valueSuffix: ' times'
      },
      color: 'red'
    }
  ],
  useHighStocks: true,

};

，样本响应是：

[{
    "date": "2017/09/18",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017/09/19",
    "total_sent": 2,
    "total_success": 0,
    "total_pending_failed": 3
  },
  {
    "date": "2017/09/20",
    "total_sent": 5,
    "total_success": 5,
    "total_pending_failed": 0
  },
  {
    "date": "2017/09/21",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017/09/22",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017/09/23",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017/09/24",
    "total_sent": 0,
    "total_success": 0,
    "total_pending_failed": 0
  },
  {
    "date": "2017/09/25",
    "total_sent": 3,
    "total_success": 3,
    "total_pending_failed": 0
  }
]

当i console.log($scope.chartConfig);似乎插入了数据，但图表仍然空白。

Answer 1

最后，我能够弄清楚它，所以我将其留在这里以供将来参考，我修改了我的代码，这起作用：D

$scope.dateRangeTransactions = function() {
  ApiService.dateRange(payload).then(function(response) {
    data = response.data;
    console.log(data);
    for (var i = 0; i < data.length; i++) {
      date = data[i].date.replace(///g, ",").split(",");
      unix_date = Date.UTC(date[0], date[1] - 1, date[2]);
      console.log(unix_date);
      $scope.sent_array.push([unix_date, data[i].total_sent]);
      $scope.success_array.push([unix_date, data[i].total_success]);
      $scope.failed.push([unix_date, data[i].total_pending_failed]);
      $scope.date_array.push(data[i].date);
    }
    $scope.minDate = $scope.date_array[0];
    $scope.maxDate = $scope.date_array[$scope.date_array.length - 1];
    console.log($scope.sent_array);
    console.log($scope.success_array);
    console.log($scope.failed);
    $scope.chartConfig.getChartObj().series[0].setData($scope.sent_array);
    $scope.chartConfig.getChartObj().series[1].setData($scope.success_array);
    $scope.chartConfig.getChartObj().series[2].setData($scope.failed);
  }, function(error) {
    console.log(error);
  });
}
$scope.dateRangeTransactions(payload);