WedX - журнал о программировании и компьютерных науках

setInterval в Angular JS для HighCharts-ng не работает

Как установить setInterval в настройках конфигурации линейной диаграммы angularjs highcharts ng. Я работаю над созданием динамической линейной диаграммы с использованием highcharts-ng, и моя диаграмма отображает исходные статические данные, и когда дело доходит до отображения динамических данных, я вижу, что событие загрузки в scope.chartConfig4 не привлекает внимание, поэтому моя диаграмма остается статической. Вот мой фрагмент кода.

Обновление: я использую highcharts-ng директиву angular, которая не отображает мою динамическую карту даже после того, как я исправил тайм-аут на интервал. Я пытаюсь преобразовать следующий код https://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm с помощью angularjs. Пожалуйста помоги.

 $scope.chartConfig4 = {
   chart: {
     type: 'spline',
     animation: Highcharts.svg, // don't animate in old IE
     marginRight: 10,
     events: {
       load: function() {

         // set up the updating of the chart each second
         var series = this.series[0];
         setInterval(function() {
           var x = (new Date()).getTime(), // current time
             y = Math.random();
           series.addPoint([x, y], true, true);
         }, 1000);
       }
     }
   },
   title: {
     text: ''
   },
   xAxis: {
     type: 'datetime',
     tickPixelInterval: 150
   },
   yAxis: {
     title: {
       text: 'Users(in thousands)'
     },
     plotLines: [{
       value: 0,
       width: 1,
       color: '#808080'
     }]
   },
   tooltip: {
     formatter: function() {
       return '<b>' + this.series.name + '</b><br/>' +
         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
         Highcharts.numberFormat(this.y, 2);
     }
   },
   legend: {
     enabled: false
   },
   exporting: {
     enabled: false
   },
   series: [{
     name: 'Users',
     data: (function() {
       // generate an array of random data
       var data = [],
         time = (new Date()).getTime(),
         i;

       for (i = -19; i <= 0; i += 1) {
         data.push({
           x: time + i * 1000,
           y: Math.random()
         });
       }
       return data;
     }())
   }]
 };
Update: I am using highcharts-ng an angular directive which does not display my dynamic map even after i corrected the timeout to interval. I am trying to convert the following code https://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm using angularjs . Please help.


Ответы:


1

setInterval выводит вас за пределы Angular, а это означает, что $scope.apply() никогда не вызывается. Вместо этого следует использовать $interval, чтобы правильно запускался цикл дайджеста.

$interval(function() {
    var x = (new Date()).getTime(), // current time
    y = Math.random();
    series.addPoint([x, y], true, true);
}, 1000);
05.10.2015
  • Спасибо Дэвид!. Я использую highcharts-ng угловую директиву, которая не отображает мою динамическую карту даже после того, как я исправил тайм-аут на интервал. Я пытаюсь преобразовать следующий код tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm, используя угловой. Пожалуйста помоги. 05.10.2015
  • @Джон, слишком сложно устранять неполадки в библиотеке, с которой я не знаком, когда вы не можете точно определить проблему. Можете ли вы создать plunker или jsfiddle, который воспроизводит проблему? 05.10.2015
  • Новые материалы

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


    Для любых предложений по сайту: [email protected]