amCharts - 각도 업데이트 차트 데이터를 동적으로

사용 amCharts-각도 지침 : https://github.com/GrantMStevens/amCharts-Angular amCharts - 각도 업데이트 차트 데이터를 동적으로

내가 성공적으로 페이지가로드 될 때 차트를 렌더링하는 약속의 초기 chartOptions 객체를로드하는 기능이있다. 그러나 지시문에 포함 된 $scope.$broadcast('amCharts.updateData',options,'id') 이벤트를 사용하여 동적으로 새 옵션을로드하면 차트가 비어있게됩니다. 제어기로드 작동 차트가 렌더링되는 초기 차트 데이터를로드 할 때

amChartsFactory.js

app.factory('amChartsFactory', ['$http', '$q', function($http, $q) { 
 

 
    var service = {} 
 

 
    service.chartOptions = {} 
 

 
    service.getChartOptions = function(symbol) { 
 
    var deferred = $q.defer() 
 
    var querySymbol = symbol 
 
    console.log(querySymbol, 'querySymbol') 
 
    $http.get('/portfolio/get-chart-data?symbol=' + querySymbol) 
 
     .then(function(response) { 
 
    
 
     var chartOptions = { 
 
      data: response.data.chart_data, 
 
      type: "serial", 
 
      categoryField: "timestamp", 
 
      rotate: false, 
 
      legend: { 
 
      enabled: true, 
 
      useGraphSettings: true 
 
      }, 
 
      chartScrollbar: { 
 
      enabled: true, 
 
      }, 
 
      categoryAxis: { 
 
      gridPosition: "start", 
 
      parseDates: false 
 
      }, 
 
      synchronizeGrid: true, 
 
      valueAxes: response.data.axes_data, 
 
      graphs: response.data.graph_data 
 
     } 
 

 
     service.chartOptions = chartOptions 
 
     deferred.resolve(chartOptions) 
 
     }) 
 
    return deferred.promise 
 
    } 
 

 
    return service 
 

 
}])

는 I amChartsFactory.getChartOptions('BTC') 함수를 호출한다. 나는 동적으로 예를 vm.getChartData('ETH')를 들어, 데이터를 업데이트 할 때

그러나 차트는 빈

app.controller('PortfolioController', PortfolioController) 
 
PortfolioController.$inject = ['$scope', '$interval', '$timeout', '$http', 'portfolioFactory', 'amChartsFactory'] 
 

 
function PortfolioController($scope, $interval, $timeout, $http, portfolioFactory, amChartsFactory) { 
 

 
    var vm = this 
 

 
    vm.amChartOptions = amChartsFactory.getChartOptions('BTC') //this loads the initial chart 
 

 
    vm.getChartData = function(symbol) { //this is supposed to use the same function to load new data, but the chart just goers blank 
 
    amChartsFactory.getChartOptions(symbol) 
 
     .then((options) => $scope.$broadcast('amCharts.updateData', options, 'currencyChart')) 
 
    } 
 

 
}

home.html을에게 간다

<div class="chart-container" style="height: 600px;"> 
 
    <am-chart id="currencyChart" options="vm.amChartOptions" height="100%" width="100%"></am-chart> 
 
</div>

차트에서 새 데이터를 동적으로 렌더링하도록하려면 어떻게해야합니까? 감사합니다.

출처

2017-10-14 chuckieDub

amCharts.updateData 이벤트는 옵션/설정이 아니라 차트의 데이터를 업데이트하기위한 것입니다.

옵션을 동적으로 변경하려면 차트 인스턴스를 사용하고 해당 속성에 액세스하거나 메서드를 호출해야합니다 (전체 참조는 https://docs.amcharts.com/3/javascriptcharts/AmChart 참조). 나중에 전화 chart.validateNow()

출처

2017-10-14 17:17:17 Rob

amCharts - 각도 업데이트 차트 데이터를 동적으로

답변

관련 문제