私は現在、Ionic FrameworkとAngularChartを使ってデータ駆動型のアプリケーションを開発しています。現在、UIが主に設計されている段階に達しています。ユーザーのデータをどのように表示するかについて考える必要があります見る。 AngularChartを使用することを決めたのは明らかです.Cat.jsとAngularで少し経験があるので、実際には意味があります。角度チャートでグラフの種類を動的に設定しますか？
サンドボックス環境で問題のない静的なチャートをいくつか定義しましたが、理想的には、キャンバスのクラスを設定して、残りの部分を引き出すJSON配列の値に従ってチャートのタイプを定義しますこれらの配列要素の
[
{
"name": "Fitness",
"chart_type": "chart chart-line"
},
{
"name": "Performance",
"chart_type": "chart chart-line"
},
{
"name": "Weightlifting",
"chart_type": "chart chart-line"
},
{
"name": "Anthropometrics",
"chart_type": "chart chart-line"
},
{
"name": "Sport specific test",
"chart_type": "chart chart-line"
},
{
"name": "Sport lab test",
"chart_type": "chart chart-line"
}
]
1つのメニューから選択し、それがためにアクセス可能なコントローラに$scope.metricに記憶されている（下記参照）
前述のJSON配列は以下であるから、データの次の画面（下のコード）をクリックして、データを正しいチャート形式で表示することができます。明らかにそれらは現時点ではすべて同じですが、私がプロジェクトにさらに進むと、彼らは異なってくるので、私はそれを動的にやりたいと思います。
チャートを示すべきビューを下記のコードは次のとおりです。
<ion-view>
<div class="bar bar-header bar-stable">
<button class="button button-stable button-outline" ng-click="go('home')">
<i class="icon ion-ios-home"></i>
</button>
<h1 class="title">{{ metric.name }}</h1>
<button class="button button-stable button-outline" ng-click="logOut()">
Log out
</button>
</div>
<ion-content>
<h2>{{ metric.name }} scores</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
</p>
<canvas id="line" class="{{metric.chart_type}}" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick"></canvas>
</ion-content>
</ion-view>私は正しい事を表示しているメトリックオブジェクトは{{metric.name}}部品として正しく保存されていることを知っていますチャートをレンダリングするキャンバス上の要素を調べると、クラスが正しいことがわかりますが、グラフはレンダリングされません（下のスクリーンショットを参照）。私はこのように任意のhelpwouldで間違ったつもりだところ、私は本当にわからないんだけど
は大歓迎さ。
EDIT - スコープの変数は、私が望んでいたと思いますどのようにDOMを変異されなかった理由を把握しようとフラストレーションの多大後ので追加しまし関連するコントローラ
angular.module('app')
.controller('metric_ctrl', function($scope, $state, user_svc, metric_svc, $ionicHistory) {
$scope.metricOptions = [{
"name": "Fitness",
"chart_type": "chart chart-line"
}, {
"name": "Performance",
"chart_type": "chart chart-line"
}, {
"name": "Weightlifting",
"chart_type": "chart chart-line"
}, {
"name": "Anthropometrics",
"chart_type": "chart chart-line"
}, {
"name": "Sport specific test",
"chart_type": "chart chart-line"
}, {
"name": "Sport lab test",
"chart_type": "chart chart-line"
}];
$scope.scores = metric_svc.getScores();
$scope.metric = metric_svc.getMetric();
// console.log($scope.metric.chart_type);
$scope.labels = ['T1', 'T2', 'T3', 'T4'];
$scope.series = ["Weight (Kg)", "BMI (%)"];
$scope.data = [
[64, 67, 70, 73],
[17.3, 18.4, 19.2, 20.1]
];
$scope.options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
scaleLabel: {
display: true,
labelString: "Weight (Kg)"
}
}, {
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right',
scaleLabel: {
display: true,
labelString: "BMI (%)"
}
}]
}
};
$scope.datasetOverride = [{
yAxisID: 'y-axis-1'
}, {
yAxisID: 'y-axis-2'
}];
$scope.logOut = function() {
$scope.user = {};
user_svc.setUser($scope.user);
$state.go('login');
};
$scope.setMetric = function(metric) {
// console.log('Setting metric to ' + metric);
$scope.metric = metric;
metric_svc.setMetric(metric);
$state.go('metrics_value')
}
$scope.getScores = function() {
$scope.scores = metric_svc.getScores();
// console.log($scope.scores);
}
})
$ scope.data、$ scope.labels、$ scope.seriesおよび$ scope.options変数がコントローラで定義され、初期化されていることを確認しましたか？ – Vi100
ええ、彼らは私のサンドボックス環境でまったく同じ構造の静的チャートを作成するために使用されてきました。 JSONからクラスを派生させるためにclass = {{metric.chart_type}}を使用して以来、この問題が発生しています。 –
上記のイオンビューのJavaスクリプトコントローラで、$ timeout（function（）{}）;チャートをロードしているすべてのコードの後に。それは役に立ちますか？ –