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

这样就可以实时动态更新数据了

转载于:https://www.cnblogs.com/RoadAspenBK/p/7615636.html

angular 与 highcharts 结合使用相关推荐

angular 动画_如何在Angular 6中使用动画
angular 动画介绍 (Introduction) Animation is defined as the transition from an initial state to a final ...
highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 $(documen ...
Highcharts使用小心得
目前使用Highcharts是开发手机端的一些图表页面,相对于交互的要求,这边在开发的过程中遇到了一些问题.目前总结一些问题和解决方法. 1.Highcharts封装由于Highcharts开发会多 ...
Highcharts Stock内置的技术指标
Highcharts Stock内置的技术指标 Highcharts Stock(以前称为 Highstock)允许您使用纯 JavaScript 创建股票或一般时间线图表,包括复杂的导航选项,如小型 ...
Highcharts高级响应能力支持
Highcharts高级响应能力支持 Highcharts是业界领先的JavaScript图表库.Highcharts被数以万计的开发人员和世界上100家最大公司中的80%以上使用.Highchart ...
Highcharts Stock Crack,导航选项和内置的技术指标
Highcharts Stock Crack,导航选项和内置的技术指标 Highcharts Stock(以前称为 Highstock)允许您使用纯 JavaScript 创建股票或一般时间线图表,包 ...
开源？Highcharts JS 10.3.2 | Highcharts Javascript
Highsoft 是 Highcharts Javascript 图表库及其同类产品 Highcharts Stock.Highcharts Maps 和 Highcharts Gantt 背后的公司 ...
Highcharts JS v10.1.0 Crack
Highcharts JS v10.1.0 新的图表属性可防止在更新系列或点时发生数据突变. 2022 年 5 月 4 日 - 15:42新版本特征添加了 allowMutatingData 图表 ...
Angular5使用highcharts
title: Angular5使用highcharts date: 2018-08-03 14:22:11 tags: highcharts angular-highcharts Angular5中使 ...

angular 与 highcharts 结合使用

一、我们要见将相关文件引入html中。

二、将图表以highchart DOM包含。

三、将series 中的data 设置为$scope 的变量。

四、设置定时器，周期请求数据并更新数据。

angular 与 highcharts 结合使用相关推荐

最新文章

热门文章