Angularjs動態載入ECharts(一)
今早發現,directive寫的echarts元件,雖然能夠獲取到Controller中的資料,但是當我使用$http請求到的資料,想傳到directive卻總是獲取不到,知道這是非同步問題,圖表載入後,資料才請求到,所以圖表載入不了資料
解決方法
使用ng-if
,判斷,如果有資料才顯示,完美解決
<realtem-data ng-if="data" id="temdata" legend="legend" item="item" data="data"></realtem-data>
其餘程式碼
controller程式碼
app.controller("temdataCtrl", function($scope, $http, $log) {
$http({
method: "get",
url: "http://..:3000/tem",
headers: {
"content-type": "application/json"
}
}).then(function(req) {
// console.log(req.data)
$scope.data = req.data
})
})
directive程式碼
app.directive('realtemData', function() {
return {
scope: {
id: "@",
data: "="
},
restrict: 'E',
template: '<div class="real-data-charts"></div>',
replace: true,
link: function($scope, element, attrs, controller) {
var option = {
color: ['#CD3700'],
tooltip: {
trigger: 'axis',
axisPointer: { // 座標軸指示器,座標軸觸發有效
type: 'shadow' // 預設為直線,可選為:'line' | 'shadow'
}
},
legend: {
data: ['溫度'],
},
label: {
normal: {
show: true
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: [1, 2, 3, 4, 5],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '溫度',
type: 'line',
barWidth: '60%',
data: $scope.data
}]
};
var myChart = echarts.init(document.getElementById($scope.id), 'macarons');
myChart.setOption(option);
}
};
});
注意
發現如果多個資料的話,可能這麼操作會導致圖表上只有一個資料顯示
所以我把所有的資料都放到一個物件中,然後ng-if只判斷這個物件即可
相關文章
- echarts遷移圖動態載入Echarts
- AngularJs動態載入模組和依賴注入簡單介紹AngularJS依賴注入
- echarts非同步載入Echarts非同步
- 使用Echarts和Ajax動態載入資料進行大資料視覺化Echarts大資料視覺化
- 動態載入的一些坑
- .NET 動態載入程式集 (一) (轉)
- echarts之靜態與動態地圖Echarts地圖
- vue 動態載入元件Vue元件
- Java動態載入類Java
- AngularJS動態設定CSSAngularJSCSS
- AngularJS教程九—— 動態表格AngularJS
- 動態載入UserControl
- OrchardCore 如何動態載入模組?
- 使用dlopen載入動態庫
- ListView動態載入資料View
- QLibrary 載入動態庫
- vue 動態載入組建Vue
- goloader - golang動態載入Golang
- 熱更新--動態載入frameworkFramework
- 動態庫載入過程
- 動態載入APK原理分享APK
- 動態載入JS和CSSJSCSS
- 動態載入JS的方法JS
- 動態載入!dom應用!
- python動態載入(三)Python
- 關於angularjs的載入方式AngularJS
- js動態載入實現提高網頁載入速度JS網頁
- EasyUI Jquery 動態載入樹,點選節點載入UIjQuery
- 如何動態載入js檔案JS
- Android動態載入jar/dexAndroidJAR
- nginxphp動態編譯載入模組.NginxPHP編譯
- easyui 動態載入語言包UI
- linux核心動態載入模組Linux
- APK動態載入框架(DL)解析APK框架
- 動態載入頁面--小練
- 動態載入程式集(三) (轉)
- 利用Assembly動態載入程式集
- 一週入門angularJS(一)AngularJS