highcharts 圖表結合angularjs 完成 請求數據動態顯示圖表。
一、我們要見將相關文件引入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">
外層可以隨意嵌套,樣式要設置寬高,已經 block 屬性
.charts_div{
margin-top: 20px;
width: 490px;/*必須*/
height: 200px;/*必須*/
display: block;/*必須*/
}
三、將series 中的data 設置為$scope 的變量。
先自定義一組初始數據。
//圖表數據 $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] } };
初始數據一定要放在引用數據之前,否則會報錯。
//網絡速度 面積曲線圖 $scope.chartConfig_interstate={ chart: { type: 'areaspline' }, title:{ text:null }, xAxis: { allowDecimals: false, labels:false }, legend:{//底部title禁止顯示 enabled:false }, yAxis: { title: { text: '' }, gridLineDashStyle: 'longdash',//修改Y刻度線的樣式類型為破折號 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: {//鼠標移入顯示數據 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: '實時下載速度', data:$scope.chartData.interstate_series.data_download, color:'#85f985'//面積圖的背景色 },{ name: '實時上傳速度', data: $scope.chartData.interstate_series.data_upspeed, color:'#6bb1f7'//面積圖的背景色 }] };
四、設置定時器,周期請求數據並更新數據。
//定期獲取數據 var setChartDate = setInterval(function(){ $http({ method:'GET', url:'wifi.php' }).then(function successCallback(response){ // console.log(response); if(response){ console.log(response); 成功后將請求的數據賦值 } }, function errorCallback(){ console.log(2); }); },1000);
這樣就可以實時動態更新數據了