угловых chart.js данных в реальном времени

I'm с помощью https://github.com/jtblin/angular-chart.js (и угловую 1.5 компоненты) и пытаются имитировать "данные в реальном времени"угловых chart.js данных в реальном времени

<canvas id="base" class="chart-line" 
    chart-data="$ctrl.realTimeClicks" 
    chart-labels="$ctrl.domains" 
    chart-colors="$ctrl.colors" 
    chart-dataset-override="$ctrl.realTimeClicksOptions"> 
    </canvas>

и в компоненте

this.realTimeClicks = []; 
    setInterval(function() { 
    var random = (Math.floor((Math.random() * 10) + 1)); 
    this.realTimeClicks.push(random); 
    }, 2000);

Но я получаю «Невозможно прочитать свойство« push »неопределенного«

источник

2016-09-09 Mackelito

Можете ли вы создать jsfiddle? – fen89

http://codepen.io/mackelito/pen/wzKaPZ – Mackelito

Структура исходных данных в $ scope.graph.data (массив массивов) и данные, которые вы хотите нажать (просто число), не совпадают, поэтому график не будет обновляться. Если вы выберете $ scope.graph.data в интервале, вы увидите, что данные вставляются в массив. –

Я использовал ваш код, следующий работает для меня (быстрый и грязный).

Но, похоже, Stackoverflow не может запустить это пропущено без ошибок на раме - если я копирую все в codepen он работает ..

angular.module("ionicApp", ['ionic', 'chart.js']) 
 
    .controller("RadarCtrl", function($scope, $interval) { 
 
    $scope.i = 0; 
 
    $scope.graph = {}; 
 

 
    $scope.graph.labels = []; 
 
    $scope.graph.data = []; 
 

 
    $scope.update = function() { 
 
     var random = (Math.floor((Math.random() * 10) + 1)); 
 
     $scope.graph.data.push(random); 
 
     $scope.graph.labels.push($scope.i++); 
 
    } 
 
    $interval($scope.update, 2000); 
 

 
    });

body { 
 
    cursor: url('http://ionicframework.com/img/finger.png'), auto; 
 
} 
 
p { 
 
    text-align: center; 
 
    margin-bottom: 40px !important; 
 
}

<html ng-app="ionicApp"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title>Graphs with Ionic</title> 
 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"> 
 
    </script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script> 
 
    <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
 

 
</head> 
 

 
<body ng-controller="RadarCtrl"> 
 
    <ion-header-bar class="bar-positive"> 
 
    <h1 class="title">Ionic Graphs</h1> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
    <h1>Simple Line chart for Ionic: {{graph.data}}</h1> 
 
    <canvas id="bar" class="chart chart-line" chart-data="graph.data" chart-labels="graph.labels"></canvas> 
 
    </ion-content> 
 

 
</body> 
 

 
</html>

источник

2016-09-09 11:56:42 fen89

Почти до стыдно признаться это, но проблема для меня была фактически такой же простой, как использование:

self = this;

источник

2016-09-10 11:02:49 Mackelito

угловых chart.js данных в реальном времени

ответ

Смежные вопросы