avec la directive amCharts angulaire: https://github.com/GrantMStevens/amCharts-Angulardonnées amCharts angulaire graphique de mise à jour dynamique
J'ai une fonction chargement de l'objet initial chartOptions d'une promesse, ce qui est rendu avec succès un tableau lorsque la page se charge. Toutefois, lorsque je charge dynamiquement de nouvelles options à l'aide de l'événement $scope.$broadcast('amCharts.updateData',options,'id') inclus dans la directive, le graphique est simplement vide.
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 appellent la fonction amChartsFactory.getChartOptions('BTC') lors du chargement du contrôleur pour charger les données de graphique initiale, qui fonctionne et rend le tableau.
Cependant, lorsque je tente de mettre à jour dynamiquement les données, par exemple vm.getChartData('ETH'), le tableau se vide
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>Que puis-je faire pour que le graphique rende dynamiquement les nouvelles données? Merci