highcharts 圖表結(jié)合angularjs 完成 請(qǐng)求數(shù)據(jù)動(dòng)態(tài)顯示圖表。

一、我們要見將相關(guān)文件引入html中。

　　<script type="text/javascript" src="/NEWPC/js/angular.min.js"></script><script type="text/javascript" src="/NEWPC/js/jquery.min.js"></script><script type="text/javascript" src="/NEWPC/js/highcharts.js"></script><script type="text/javascript" src="/NEWPC/js/highcharts-ng.js"></script>

注意js引入的先后順序

二、將圖表以highchart DOM包含。

<highchart class="charts_div" config="chartConfig_interstate">

外層可以隨意嵌套，樣式要設(shè)置寬高，已經(jīng) block 屬性

.charts_div{margin-top: 20px;width: 490px;/*必須*/height: 200px;/*必須*/display: block;/*必須*/ }

三、將series 中的data 設(shè)置為$scope 的變量。

先自定義一組初始數(shù)據(jù)。

//圖表數(shù)據(jù)$scope.chartData={interstate_series:{data_download:[340,230,450,660,340,230],data_upspeed:[660,340,230,340,230,450]},terminalstate_series:{data:[['QH-20170829XYKT',45.0],['Firefox2',45.0],['Firefox3',45.0],]},cpustate_series:{data:[20,78,54,65,22,21,36,64,99]},memorystate_series:{data:[20,78,54,65,22,21,36,64,99]}};

初始數(shù)據(jù)一定要放在引用數(shù)據(jù)之前，否則會(huì)報(bào)錯(cuò)。

//網(wǎng)絡(luò)速度 面積曲線圖$scope.chartConfig_interstate={chart: {type: 'areaspline'},title:{text:null},xAxis: {allowDecimals: false,labels:false},legend:{//底部title禁止顯示enabled:false},yAxis: {title: {text: ''},gridLineDashStyle: 'longdash',//修改Y刻度線的樣式類型為破折號(hào) labels: {formatter: function () {if(this.value>1000){return Math.round(this.value/1024)+"MB/s"}else if(this.value<=1000&&this.value>0){return this.value + "KB/s"}else{return "0"};}},tickPositioner: function () {if(this.dataMax>=0&&this.dataMax<=1000){var positions = [0,200,400,600,800,1000];}else if (this.dataMax>1000&&this.dataMax<=5120) {var positions = [0,1024,2048,3072,4096,5120];}else if(this.dataMax>5120&&this.dataMax<=10240){var positions = [0,2048,4096,6144,8192,10240];}else if(this.dataMax>10240&&this.dataMax<=20480){var positions = [0,4096,8192,12288,16384,10240];}return positions;}},tooltip: {//鼠標(biāo)移入顯示數(shù)據(jù)formatter: function () {if (this.y>=1024) {return this.series.name + Math.round((this.y/1024)*10)/10 +"MB/s"}else{return this.series.name + Math.round(this.y*10)/10 + "KB/s"}}},series: [{name: '實(shí)時(shí)下載速度',data:$scope.chartData.interstate_series.data_download,color:'#85f985'//面積圖的背景色},{name: '實(shí)時(shí)上傳速度',data: $scope.chartData.interstate_series.data_upspeed,color:'#6bb1f7'//面積圖的背景色}]};

?

四、設(shè)置定時(shí)器，周期請(qǐng)求數(shù)據(jù)并更新數(shù)據(jù)。

//定期獲取數(shù)據(jù)var setChartDate = setInterval(function(){$http({method:'GET',url:'wifi.php'}).then(function successCallback(response){ // console.log(response);if(response){console.log(response); 成功后將請(qǐng)求的數(shù)據(jù)賦值}}, function errorCallback(){console.log(2);});},1000);

這樣就可以實(shí)時(shí)動(dòng)態(tài)更新數(shù)據(jù)了

轉(zhuǎn)載于:https://www.cnblogs.com/RoadAspenBK/p/7615636.html

總結(jié)

以上是生活随笔為你收集整理的angular 与 highcharts 结合使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。