アンギュラchart.jsリアルタイムデータ

- 私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);

にしかし、私は取得"未定義のプロパティ 'プッシュ'を読み取ることができません。

出典

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リアルタイムデータ

答えて

関連する問題