highcharts图表开发

一、首先引人highcharts图表插件

 <!-- 引用highcharts图标插件 --><script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/highcharts.js"></script><script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/highcharts-3d.js"></script><script type="text/javascript" src="${path}/plugings/highcharts-6.0.2/code/modules/exporting.js"></script>

项目插件结构

二、实例

（1）、实现饼图
var s = ["stuVm", "teaVm", "serverVm"]for (var i = 0; i < s.length; i++) {var obj = s[i];var $obj = $("#" + obj + "Info");$obj.highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,height: 284,width: 324},title: {text: '' + $obj.attr("name") + '使用占比'},tooltip: {headerFormat: '{series.name}<br>',pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}},series: [{type: 'pie',name: '' + $obj.attr("name") + '使用占比',size: '60%',data: [{name: '已启动',color: '#8F94F6',y: rel.vmInfo.data[obj + "Info"][obj + "Online"]}, {name: '未启动',color: '#F7A35C',y: rel.vmInfo.data[obj + "Info"][obj + "NoOnline"]}]}],credits: {text: '' + $obj.attr("name") + "总数：" + rel.vmInfo.data[obj + 'Total'],}})}

（2）实现柱状图
$("#vmInfo").highcharts({chart: {type: 'column',plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,height: 284,width: 324},title: {text: '系统汇总统计(系统总数：' + rel.vmInfo.data.vmTotal + '个)'},xAxis: {type: 'category'},yAxis: {title: {text: '系统数量（个）'}},legend: {enabled: false},tooltip: {headerFormat: '<span style="font-size:11px">{series.name}</span><br>',pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> 个<br/>'},series: [{name: '系统',colorByPoint: true,data: [['学生系统', rel.vmInfo.data.stuVmTotal],['教师系统', rel.vmInfo.data.teaVmTotal],['应用系统', rel.vmInfo.data.serverVmTotal],['总系统数', rel.vmInfo.data.vmTotal]]}]})

(3)实现环形图
$("#userInfo").highcharts({chart: {type: 'pie',height: 284,width: 324,options3d: {enabled: true,alpha: 45}},title: {text: '用户信息汇总（总用户数：' + rel.userInfo.data.totalNum + '个）'},plotOptions: {pie: {innerSize: 40,depth: 20}},series: [{name: '用户数量',data: [['低级学生用户', rel.userInfo.data.lowStuNum],['高级学生用户', rel.userInfo.data.hightStuNum],['教师用户', rel.userInfo.data.teaNum],['管理员', rel.userInfo.data.adminNum],['太易云管理员', rel.userInfo.data.taeAdminNum]]}]})

（4）.实现3D柱状图
$("#terInfo").highcharts({chart: {type: 'column',height: 284,width: 324,plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,options3d: {enabled: true,alpha: 10,beta: 25,depth: 70}},title: {text: '终端信息（终端总数：' + rel.terInfo.data.totalNum + '个）'},plotOptions: {column: {depth: 25}},xAxis: {type: 'category',labels: {skew3d: true,style: {fontSize: '12px'}}},yAxis: {title: {text: '终端个数（个）'}},series: [{name: '终端数',colorByPoint: true,data: [['已启动终端数', rel.terInfo.data.activeNum], ['未启动终端数', rel.terInfo.data.noActiveNum]]}]})

(5)实现上下双层柱状图$("#imgInfo").highcharts({chart: {type: 'column',height: 284,width: 324,options3d: {enabled: true,alpha: 15,beta: 15,viewDistance: 25,depth: 40}},title: {text: '镜像信息(总数：' + rel.imgInfo.data.totalImg + '个)'},xAxis: {categories: ['学生镜像', '教师镜像', '应用镜像'],labels: {skew3d: true,style: {fontSize: '16px'}}},yAxis: {allowDecimals: false,min: 0,title: {text: '镜像个数（个）',skew3d: true}},tooltip: {headerFormat: '<b>{point.key}</b><br>',pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'},plotOptions: {column: {stacking: 'normal',depth: 40}},series: [{name: '已同步镜像数',data: [{color: '#90ED7D',y: rel.imgInfo.data.stuImg.isSyn},{color: '#90ED7D',y: rel.imgInfo.data.teaImg.isSyn},{color: '#90ED7D',y: rel.imgInfo.data.serverimg.isSyn}]}, {name: '未同步镜像数',data: [{color: '#FFBC75',y: rel.imgInfo.data.stuImg.noSyn},{color: '#FFBC75',y: rel.imgInfo.data.teaImg.noSyn},{color: '#FFBC75',y: rel.imgInfo.data.serverimg.noSyn}],}]})

（6）实现无限叠加饼图var poolArray = rel.poolInfo;for (var i = 0; i < poolArray.length; i++) {var poolName = poolArray[i].diskName;var poolUser = poolArray[i].diskUser;var poolSurplus = poolArray[i].diskSurplus;var poolSize = poolArray[i].size;$("#contai").append("<div id='container" + poolName + "'  style='margin-bottom:100px;margin-left:30px;margin-top:20px;width: 340px;height: 280px;float: left;'></div>");var container = $("#container" + poolName + "").highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false,height: 300,width: 380},title: {text: '' + poolName + '磁盘使用占比'},tooltip: {headerFormat: '{series.name}<br>',pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}},series: [{type: 'pie',name: '' + poolName + '磁盘使用占比',size: '60%',data: [['使用', poolUser],['剩余', poolSurplus]]}],credits: {text: "磁盘总容量大小：" + poolSize,}});}

highcharts图表开发相关推荐

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
前端图表制作——HighCharts图表入门
HighCharts图表入门 HighCharts的作用在JavaEE企业级项目开发中,很多项目都会用到数据的统计和图表的展示功能,如:各种股票系统,银行的资金结算,公司的财务报表,等等.如何快 ...
Xamarin图表开发基础教程（13）OxyPlot框架支持的其它图表
Xamarin图表开发基础教程(13)OxyPlot框架支持的其它图表除了以上提到的图表外,OxyPlot组件还包含了6种类型的其它图表,分别为等高线图.箱线图.饼图.热图.散点图和散点误差图,如图 ...
Xamarin图表开发基础教程（12）OxyPlot框架支持的金融图表类型
Xamarin图表开发基础教程(12)OxyPlot框架支持的金融图表类型 OxyPlot组件中支持5种类型的金融图表,它们分别为销量图.高低图.股票K线图.股票走势图和旧式股票图,如图1.20~1. ...
Xamarin图表开发基础教程（11）OxyPlot框架支持的图表类型
Xamarin图表开发基础教程(11)OxyPlot框架支持的图表类型 OxyPlot组件中支持7种类型的条型图表,分别为普通条形图.线型条形图.矩形条形图.差值图.龙卷风图.普通柱形图和柱形误差图, ...
Xamarin图表开发基础教程（10）OxyPlot框架支持的图表类型
Xamarin图表开发基础教程(10)OxyPlot框架支持的图表类型 OxyPlot组件支持26种图表,这些图表按照功能和样式可以分为4大类,分别为线型图表.条型图表.金融图表和其它图表. 线型图表 ...
Xamarin图表开发基础教程（8）OxyPlot框架
Xamarin图表开发基础教程(8)OxyPlot框架 [示例OxyPlotFormsDemo]在Xamarin.Forms中实现线图的显示. (1)打开Xamarin.Forms项目. (2)将Ox ...
Xamarin图表开发基础教程（7）OxyPlot框架
Xamarin图表开发基础教程(7)OxyPlot框架 Xamarin.Forms中使用OxyPlot框架在Xamarin. Forms平台上实现图表显示需要完成以下的步骤: 1.添加OxyPlot ...

highcharts图表开发

highcharts图表开发相关推荐

最新文章

热门文章