2016-01-25 10 views
0

им пытаются этооказывают динамическое число Highcharts диаграмм не работает

$scope.chartsArray = []; 
for (var j = 0; j <= i; j++) { //i its the amount of charts to display 
    document.getElementById("charts").innerHTML += '<div class="col-md-6" id="chart-' + j + '"></div>'; 
    $scope.tmp = new Highcharts.Chart({ 
     series: [1,2,3,4], 
     chart: { type: 'column', renderTo: 'chart-' + j }, 
    }); 
    $scope.chartsArray.push($scope.tmp); 
} 

на этом Div

<div id="charts" class="col-md-12" style="margin-top:50px"> </div> 

Но когда я загружаю диаграммы только последний нагруженные работает правильно, другие диаграммы не отображайте серию, и взаимодействия не отвечают (например, экспортируют или скрывают серию). Почему это? Вы, ребята, знаете какой-нибудь другой способ сделать это?

+0

Попробуйте изменить '$ scope.tmp' на' var tmp' для охвата каждой из диаграмм и создавать их отдельно. На данный момент вы нажимаете ссылку на объект несколько раз, изменяя объект. – ryan0319

+0

Это не то, как это сделать вообще. Пусть угловая конструкция dom основана на вашей модели данных. Если этот код работает в контроллере ... шаблон может еще не существовать событий – charlietfl

+0

@ ryan03129 Я уже сделал это, ничего не изменилось – Jozky

ответ

3

Неправильная практика доступа и изменения DOM с вашего углового контроллера. Вместо этого используйте директиву. Вот один для highcharts https://github.com/pablojim/highcharts-ng