0
我目前正在使用Ionic Framework和AngularChart開發一個數據驅動的應用程序，現在我已經進入了UI設計的階段，現在我需要開始考慮如何爲用戶顯示數據查看。顯然，我決定使用AngularChart，因爲我有一些Chart.js和Angular的工作經驗，所以它很有意義！用Angular Chart動態設置圖表類型？
我已經在沙箱環境中定義了幾個靜態圖表，但沒有問題，但理想情況下我會設置畫布的類來根據JSON數組中的值來定義圖表類型，從數據（參見下文）
上述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"
}
]
其中一個陣列元件的從菜單中的控制器，它是可訪問的選擇和存儲在$scope.metric下一個屏幕（下面的代碼），以便數據可以以正確的圖表格式顯示。顯然他們現在都是一樣的，但當我進一步進入項目時他們會有所不同，所以我想嘗試動態地做。
的代碼應顯示在圖表上的視圖是如下：
<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腳麻不勝感激。
編輯 - 添加了相關的控制器
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
是的，它們都用於在我的沙盒環境中創建具有完全相同結構的靜態圖表。由於我使用class = {{metric.chart_type}}從JSON派生類，因此該問題出現了。 –
在上面的離子視圖的Java腳本控制器中，嘗試將$ timeout（function（）{}）;畢竟是加載圖表的代碼。這有幫助嗎？ –