angular 與 highcharts 結合使用

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);

這樣就可以實時動態更新數據了