update amcharts data in angular-amcharts

问题

I am using amchart to render a chart with JSON data which is an API response data, and its working perfectly. Now I have to update the data on the basis of a selection dropdown which make a API call request to get the response JSON, which is also done now after getting the response data I don't know how to update the chart with the

$scope.changeYearFunction = function(){
  console.log($scope.selectedYear);
  chartService.getDataByMonth($scope.selectedYear).then(function(response){
    $scope.monthdata = response.data;
	$scope.$apply();
  })
}
$scope.monthChart = function(year){
  chartService.getDataByMonth('2016').then(function(response){
    $scope.monthdata = response.data;
	$scope.finishloading = true;
	console.log($scope.monthdata);
	$scope.amChartOptions = {
		data : $scope.monthdata,
		type: "serial",
		theme: "light",
		marginRight: 80, 
		balloon: {
		  cornerRadius: 6,
		  horizontalPadding: 15,
		  verticalPadding: 10
		},
		chartScrollbar: {
		  enabled: true,
		},
		valueAxes: [{
		  gridAlpha: 0.5,
		  gridColor: '#dddddd',
		}],
		graphs: [{
		  bullet: 'square',
		  bulletBorderAlpha: 1,
		  bulletBorderThickness: 1,
		  fillAlphas: 0.5,
		  //fillColorsField: 'lineColor',
		  legendValueText: '[[value]]',
		  //lineColorField: 'lineColor',
		  title: 'power',
		  valueField: 'power'
		}],
		chartCursor: {
		  //categoryBalloonDateFormat: 'MMM',
		   cursorAlpha: 0,
		   fullWidth: true
		},
		  //dataDateFormat: "MM",
		  categoryField: "month",
		export: {
		  enabled: true
		}		    
	  }
   })
 }();

<div class="panel-heading"><span>Monthly Consumption</span>
	<select ng-model="selectedYear" ng-change="changeYearFunction()">
		<option ng-repeat="x in year" value={{x}}>{{x}}</option>
	</select>
</div>
<div class="panel-body">
	<div style="height: 450px; width: 100%;">
		<am-chart ng-if="finishloading" id="myAreaChart" options="amChartOptions"></am-chart>
	</div>
</div>

回答1:

You can reset amchart with ng-if that already exist in your template. After data loaded you just $scope.amChartOptions.data = $scope.monthdata.

$scope.amChartOptions = {
                data : [],
                type: "serial",
                theme: "light",
                marginRight: 80,

                balloon: {
                    cornerRadius: 6,
                    horizontalPadding: 15,
                    verticalPadding: 10
                  },
                  chartScrollbar: {
                        enabled: true,
                    },
                valueAxes: [
                    {

                      gridAlpha: 0.5,
                      gridColor: '#dddddd',
                    }
                  ],
                graphs: [
                    {
                      bullet: 'square',
                      bulletBorderAlpha: 1,
                      bulletBorderThickness: 1,
                      fillAlphas: 0.5,
                      //fillColorsField: 'lineColor',
                      legendValueText: '[[value]]',
                      //lineColorField: 'lineColor',
                      title: 'power',
                      valueField: 'power'
                    }
                  ],

                  chartCursor: {
                      //categoryBalloonDateFormat: 'MMM',
                      cursorAlpha: 0,
                      fullWidth: true
                    },
                //dataDateFormat: "MM",
                categoryField: "month",

                export: {
                    enabled: true
                };

$scope.changeYearFunction = function(){

       $scope.finishloading = false;
       console.log($scope.selectedYear);
       chartService.getDataByMonth($scope.selectedYear).then(function(response){

           $scope.monthdata = response.data;
           $scope.finishloading = true;

           $scope.amChartOptions.data = $scope.monthdata;

           $scope.$apply();

       })
}

来源：https://stackoverflow.com/questions/43889308/update-amcharts-data-in-angular-amcharts