Update Amcharts Daten in Winkel-Amcharts

Question

Ich verwende amchart, um ein Diagramm mit JSON-Daten zu rendern, die eine API-Antwortdaten ist, und es funktioniert perfekt. Jetzt muss ich die Daten auf der Basis eines Auswahldrawdowns aktualisieren, die eine API-Aufrufanforderung stellen, um die Antwort JSON zu erhalten, die auch jetzt nach dem Abrufen der Antwortdaten ausgeführt wird. Ich weiß nicht, wie ich das Diagramm mit der

aktualisieren kann

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

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

Answer 1

zurücksetzen Sie können amchart mit ng-if, die bereits in der Vorlage vorhanden sind. Nach dem Laden der Daten nur $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(); 

     }) 
}