更新角度图表中的图表数据

本文介绍了更新角度图表中的图表数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用amchart渲染带有JSON数据(即API响应数据)的图表， 并且完美地工作.现在，我必须根据选择下拉列表来更新数据，该选择下拉列表会发出API调用请求以获取响应JSON，在获取响应数据后，现在也要执行此操作，我不知道如何使用

$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>

解决方案

您可以使用模板中已存在的ng-if重置amchart.加载数据后，您只需$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(); }) }

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>

解决方案

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