hightChart 的一些实现
来源：互联网 发布：苏宁秒杀软件哪个好 编辑：程序博客网 时间：2024/06/05 16:45
<%--@(#)appversion.html 2016/4/18@author cwq--%><%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ include file="/WEB-INF/taglib.jsp"%><!DOCTYPE html><html lang="en"><head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title><jc:title /></title> <meta name="description" content="overview & stats" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/bootstrap.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/font-awesome.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/jquery-ui.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/datepicker.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ui.jqgrid.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-fonts.css" /> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" /> <!--[if lte IE 9]> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-part2.css" class="ace-main-stylesheet" /> <![endif]--> <!--[if lte IE 9]> <link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-ie.css" /> <![endif]--> <!-- inline styles related to this page --> <!-- ace settings handler --> <script src="/res/ace-1.3.3/assets/js/ace-extra.js"></script> <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --> <!--[if lte IE 8]> <script src="/res/ace-1.3.3/assets/js/html5shiv.js"></script> <script src="/res/ace-1.3.3/assets/js/respond.js"></script> <![endif]--></head><body class="no-skin"><%--顶部--%><div id="navbar" class="navbar navbar-default navbar-fixed-top"> <script type="text/javascript"> try{ace.settings.check('navbar' , 'fixed')}catch(e){} </script> <div class="navbar-container" id="navbar-container"> <jsp:include page="/WEB-INF/view/common/top.jsp"/> </div></div><%--end 顶部--%><div class="main-container" id="main-container"> <script type="text/javascript"> try{ace.settings.check('main-container' , 'fixed')}catch(e){} </script> <!-- #下拉 --> <div id="sidebar" class="sidebar sidebar-fixed responsive"> <script type="text/javascript"> try{ace.settings.check('sidebar' , 'fixed')}catch(e){} </script> <div class="sidebar-shortcuts" id="sidebar-shortcuts"> <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large"> <button class="btn btn-success"> <i class="ace-icon fa fa-signal"></i> </button> <button class="btn btn-info"> <i class="ace-icon fa fa-pencil"></i> </button> <!-- #section:basics/sidebar.layout.shortcuts --> <button class="btn btn-warning"> <i class="ace-icon fa fa-users"></i> </button> <button class="btn btn-danger"> <i class="ace-icon fa fa-cogs"></i> </button> <!-- /section:basics/sidebar.layout.shortcuts --> </div> <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini"> <span class="btn btn-success"></span> <span class="btn btn-info"></span> <span class="btn btn-warning"></span> <span class="btn btn-danger"></span> </div> </div> <!-- /.sidebar-shortcuts --> <!-- 菜单 --> <jc:menu /> <!-- /.nav-list --> <!-- #section:basics/sidebar.layout.minimize --> <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> <!-- /section:basics/sidebar.layout.minimize --> <script type="text/javascript"> try{ace.settings.check('sidebar' , 'collapsed')}catch(e){} </script> </div> <!-- /section:basics/sidebar --> <div class="main-content"> <div class="main-content-inner"> <!-- #section:basics/content.breadcrumbs --> <div class="breadcrumbs breadcrumbs-fixed" id="breadcrumbs"> <script type="text/javascript"> try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){} </script> <jc:breadcrumb /> </div> <div class="page-content"> <div class="clearfix"></div> <div class="row" style="margin: 20px 0px"> <div class="col-sm-10"> <div id="ID_container" style="min-width:400px;height:400px"></div> </div> <div class="col-sm-2"> <div class="row"style="margin-top:10px;margin-bottom: 10px "> 统计方式： <select id="ID_userCount"> <option value="0">按日统计</option> <option value="1">按月统计</option> <option value="2">按年统计</option> </select> </div> <div class="row" style="margin-top:10px;margin-bottom: 10px "> 选择页码：第 <select id="ID_userPage"> </select>页 </div> </div> </div> <div class="clearfix"></div> <div class="row" style="margin: 20px 0px"> <div id="ID_container_shop" style="min-width:400px;height:400px"></div> </div> <div class="clearfix"></div> <div class="row" style="margin: 20px 0px"> <div class="col-sm-10"> <div id="ID_container_order" style="min-width:400px;height:400px"></div> </div> <div class="col-sm-2"> <div class="row"style="margin-top:10px;margin-bottom: 10px "> 统计方式： <select id="ID_userCount_order"> <option value="0">按日统计</option> <option value="1">按月统计</option> <option value="2">按年统计</option> </select> </div> <div class="row" style="margin-top:10px;margin-bottom: 10px "> 选择页码：第 <select id="ID_userPage_order"> </select>页 </div> </div> </div> <div class="row" style="margin: 20px 0px"> <div class="col-lg-6"> <iframe id="ID_map"class="col-lg-12" style="height: 600px;"></iframe> </div> <div class="col-lg-6"> <div id="ID_area" style="min-width:400px;height:400px"></div> </div> </div> <div class="row" style="margin: 20px 0px"> <div id="ID_sex" style="min-width:400px;height:400px"></div> </div> <div class="row" style="margin: 20px 0px"> <div id="ID_showFz" style="min-width:400px;height:400px"></div> </div> </div> </div> </div> <!-- /.main-content --> <jsp:include page="/WEB-INF/view/common/footer.jsp" flush="true" /> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i> </a> <!-- /.main-container --> <jsp:include page="/WEB-INF/view/common/basejs.jsp"/> <%--// jQuery--%> <%--<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>--%> <%--// Highcharts--%> <script src="/res/highcharts/highcharts.js"></script> <script type="text/javascript"> var Y = [];//y周数组// var showUserDataTotalPage = 0 ;//第一个报表所有的行数 $(document).ready(function () { showUserData(0,1); showShopItem(); showOrderData(0,1); toMap(); showSex(); showFz(); }); /* * * @showType 0是每天 1是每月 2是每年 * @page 第几页 * */ var showUserData = function(showType,page){ /* * type 1安装用户 , 注册的用户 , 美容师注册 ,订单成单量 2商品统计 3用户区域 4性别 5肤质 * show_type 0 安装用户 1 注册的用户 2 美容师注册 3 订单成单量 * 按天统计 * */ var rows = 10;//日 $.post("/statistics",{ type:1, show_type:0, page:page, rows:rows, selectType:showType },function(data1){//code 0// console.log(data1); if(data1&&data1.totalPage){// showUserDataTotalPage = data1.totalPage;// firstPage: true lastPage: true pageNumber: 1 pageSize: 20 totalPage: 1 totalRow: 2 for(var i=0;i<data1.totalPage;i++){ $("#ID_userPage").append("<option value="+(i+1)+">"+(i+1)+"</option>"); } } $.post("/statistics",{ type:1, show_type:1, page:page, rows:rows, selectType:showType },function(data2){ $.post("/statistics", { type:1, show_type:2, page:page, rows:rows, selectType:showType },function(data3){ if(data1.list) { var x,d1,d2,d3; x= getXY(data1,showType).split(","); d1 = Y; x = getXY(data2,showType).split(","); d2 = Y; x = getXY(data3,showType).split(","); d3 = Y; var yAxis = [ { name:"安装用户", data:d1 },{ name:"注册用户", data:d2 }, { name:"注册美容师", data:d3 } ]// console.log(yAxis); $("#ID_container").html(""); chart("ID_container","总体信息统计",x,"人",yAxis); } }); }); }); } /* * 更改数据 * */ $("#ID_userCount").change(function(){ showUserData($(this).val(),1); }); $("#ID_userPage").change(function(){ showUserData($("#ID_userCount").val(),$("#ID_userPage").val()); }); /* * 生成 数组 用"|"分割 * @show_type 0 是每天 1是每月 2是每年 * */ var getXY = function(data1,show_type){ var x="";//x 轴 var y =[]; for (var i = 0; i < data1.list.length; i++) { var timeStr = data1.list[i].data_time; var count = data1.list[i].count; if(show_type==0)timeStr = timeStr.substr(0, 4) + "年" + timeStr.substr(4, 2) + "月" + timeStr.substr(6, 2); if(show_type==1)timeStr = timeStr.substr(0, 4) + "年" + timeStr.substr(4, 2) + "月"; if(show_type==2)timeStr = timeStr.substr(0, 4) + "年"; x = i == 0 ? timeStr : x + "," + timeStr; y[i] = parseInt(count); } Y = y; return x; } /* * * 报表数据折线图输出 * @id 输出的id * @ xAxis x 轴一维数组 * @title 标题 * @yAxis json数组 [{name:"",data:[]},{}] * */ var chart = function(id,title,xAxis,company,yAxis){ $('#'+id).highcharts({ title: {// text: '总体信息统计', text:title, x: -20 //center }, xAxis: { categories: xAxis }, yAxis: { title: { text: company }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: company }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series:yAxis }); $("#"+id+" text:last").hide(); } /* * 商品双饼图 * */ var showTwoArrData; var showTwokey; /* * @categoriesArrKey 关键字 * @categoriesArrValue 分类总数据 * */ var f_getTwoData = function(categoriesArrKey,categoriesArrValue){ var resultInt = []; var resultName = ""; var i =0; $(showTwoArrData).each(function(key,value){ var boole = false; $(value).each(function(k,v){ if(k==0) { if(categoriesArrKey==v) boole=true; } if(k==1&&boole){ resultName = resultName==""?v:resultName+","+v; } if(k==2&&boole){ resultInt[i] = v; i++; } }); }); showTwokey = resultInt; return resultName; } var showShopItem = function(){// ID_container_shop var categoriesArrKey = [];//第一个圆的name var categoriesArrValue = [];//第一个圆的数值 var categoriesArrlenght = 0; $.post("/statistics",{ type:2, queryType:1 },function(data1){ $(data1.data).each(function(key,value){ $(value).each(function(k,v){ if(k==0) categoriesArrKey[key] = v; if(k==2){ categoriesArrValue[key] = v; categoriesArrlenght = categoriesArrlenght+v; } }); }); $.post("/statistics",{ type:2, queryType:0 },function(data2){ showTwoArrData = data2.data; var colors = Highcharts.getOptions().colors, categories = categoriesArrKey,data =[];// console.log(categoriesArrKey); for(var i =0;i<categoriesArrValue.length;i++){// console.log( f_getTwoData(categoriesArrKey[i],categoriesArrValue[i])); var tempStr = f_getTwoData(categoriesArrKey[i],categoriesArrValue[i]); data[i]={ y:categoriesArrValue[i], color: colors[i], drilldown: { name: categoriesArrKey[i], categories:tempStr.split(",") , data:showTwokey, color: colors[i] } }; } var browserData = [],versionsData = [], i, j, dataLen = data.length, drillDataLen, brightness;// return; // Build the data arrays for (i = 0; i < dataLen; i += 1) { browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); drillDataLen = data[i].drilldown.data.length; for (j = 0; j < drillDataLen; j += 1) { brightness = 0.2 - (j / drillDataLen) / 5; versionsData.push({ name: data[i].drilldown.categories[j], y: data[i].drilldown.data[j], color: Highcharts.Color(data[i].color).brighten(brightness).get() }); } } // Create the chart $('#ID_container_shop').highcharts({ chart: { type: 'pie' }, title: { text: '商品总体信息统计' }, plotOptions: { pie: { shadow: false, center: ['50%', '50%'] } }, tooltip: { valueSuffix: '%' }, series: [{ name: '商品类', data: browserData, size: '60%', dataLabels: { formatter: function () { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 } }, { name: '商品', data: versionsData, size: '80%', innerSize: '60%', dataLabels: { formatter: function () { // display only if larger than 1 return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; } } }] }); $("#ID_container_shop text:last").hide(); }); }); } /* * * @showType 0是每天 1是每月 2是每年 * @page 第几页 * */ var showOrderData = function(showType,page){ /* * type 1安装用户 , 注册的用户 , 美容师注册 ,订单成单量 2商品统计 3用户区域 4性别 5肤质 * show_type 0 安装用户 1 注册的用户 2 美容师注册 3 订单成单量 * 按天统计 * */ var rows = 10;//日 $.post("/statistics",{ type:1, show_type:3, page:page, rows:rows, selectType:showType },function(data1){//code 0// console.log(data1); if(data1&&data1.totalPage){// showUserDataTotalPage = data1.totalPage;// firstPage: true lastPage: true pageNumber: 1 pageSize: 20 totalPage: 1 totalRow: 2 for(var i=0;i<data1.totalPage;i++){ $("#ID_userPage_order").append("<option value="+(i+1)+">"+(i+1)+"</option>"); } } if(data1.list) { var x,d1; x= getXY(data1,showType).split(","); d1 = Y; var yAxis = [ { name:"成单量", data:d1 } ]// console.log(yAxis); $("#ID_container_order").html(""); chart("ID_container_order","总体成单量统计",x,"成单量",yAxis); } }); } /* * 更改数据 * */ $("#ID_userCount_order").change(function(){ showOrderData($(this).val(),1); }); $("#ID_userPage_order").change(function(){ showOrderData($("#ID_userCount_order").val(),$("#ID_userPage_order").val()); }); /* * 生成地图 * */ var mapId = 0; var toMap = function(){ $("#ID_map").attr("src","/statistics/map");//地图加载 $.post("/statistics",{ type:3, queryType:mapId },function(GetData) {// console.log(GetData); var brandsData = []; var brands = []; var toName="",toValue="",brandsDataLenth=0; if(GetData.data){ $(GetData.data).each(function(k,v){ $(v).each(function(key,value){ if(key==0) toName = toName==""?value:toName+","+value; if(key==1){ toValue = toValue==""?value:toValue+","+value; brandsDataLenth = brandsDataLenth+value; } }); }); } var tempName = toName.split(","); var tempValue = toValue.split(","); for(var i=0;i<tempName.length;i++){ brandsData.push( {// drilldown: "Microsoft Internet Explorer "// name: "Microsoft Internet Explorer "// y: 53.61 name:tempName[i].replace("省","").replace("市",""), drilldown:tempName[i].replace("省","").replace("市",""),// y:parseFloat((parseInt(tempValue[i])/brandsDataLenth).toFixed(2)) y:parseInt(tempValue[i]) } ); } getBar(brandsData); }); } /* * 生成 区域柱状图 * */ var getBar = function(brandsData){ $('#ID_area').highcharts({ chart: { type: 'bar' }, title: { text: '区域统计' }, xAxis: { type: 'category' }, legend: { enabled: false }, yAxis: { title: { text: '' } }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, format: '{point.y:.1f}%' } } }, tooltip: { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: 占<b>{point.y:.2f}%</b> <br/>' }, series: [{ name: '区域', colorByPoint: true, data: brandsData }] }); $("#ID_area text:last").hide(); } /* * 男女比例 * */ var showSex = function(){ $.post("/statistics",{ type:4 },function(GetData) {// console.log(GetData.data[0]);// 0女 1 男 var sexData = []; var toName="",toValue=""; if(GetData.data){ $(GetData.data).each(function(k,v){ $(v).each(function(key,value){// if(key==0) toName = toName==""?value:toName+","+value if(key==1) toValue = toValue==""?value:toValue+","+value }); }); }// var tempName = toName.split(","); var tempValue = toValue.split(","); sexData.push( ['女', parseInt(tempValue[0])], { name: '男', y: parseInt(tempValue[1]), sliced: true, selected: true } );// console.log(sexData) $('#ID_sex').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: '用户男女比例' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', } } }, series: [{ type: 'pie', name: '占', data:sexData// data: [// ['男', 45.0],// {// name: '女',// y: 12.8,// sliced: true,// selected: true// }// ] }] }); $("#ID_sex text:last").hide(); }); } /* * 肤质 * */ var showFz = function(){ $.post("/statistics",{ type:5 },function(GetData) {// console.log(GetData); var sexData = []; var toName = "", toValue = ""; if (GetData.data) { $(GetData.data).each(function (k, v) { $(v).each(function (key, value) { if(key==0) toName = toName==""?value:toName+"|"+value if (key == 1) toValue = toValue == "" ? value : toValue + "|" + value }); }); } var tempName = toName.split("|"); var tempValue = toValue.split("|"); for(var i=0;i<tempName.length;i++) { if(i==0){ sexData.push( { name: tempName[0], name2:subString(tempName[i],20,true), y: parseInt(tempValue[0]), sliced: true, selected: true } ); }else{ sexData.push( { name: tempName[i], name2:subString(tempName[i],20,true), y: parseInt(tempValue[i]) } ); } }// console.log(sexData) $('#ID_showFz').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: '肤质统计' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name2}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ type: 'pie', name: '占', data: sexData }] }); $("#ID_showFz text:last").hide(); }); } //数字或字母 var checknum = function (value) { var Regx = /^[A-Za-z0-9]*$/; if (Regx.test(value)) { return true; } else { return false; } } //字段截取 var subString = function (str, len, hasDot) { if(checknum(str)){ var newLength = 1; var newStr = ""; var singleChar = ""; for (var i = 0; i < str.length; i++) { singleChar = str.charAt(i).toString(); newLength++; if (newLength > len) { break; } newStr += singleChar; } if (hasDot && strLength > len) { newStr += "..."; } return newStr; } else{ var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex, "**").length; for (var i = 0; i < strLength; i++) { singleChar = str.charAt(i).toString(); if (singleChar.match(chineseRegex) != null) { newLength += 2; } else { newLength++; } if (newLength > len) { break; } newStr += singleChar; } if (hasDot && strLength > len) { newStr += "..."; } return newStr; } } //alert(subString("js233333333333333",20,true) </script></body></html>
map.jsp
<%-- Created by IntelliJ IDEA. User: cwq Date: 2016/5/14 Time: 14:46 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html><html lang="en"><head> <title></title></head><body><script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script src="https://code.highcharts.com/maps/highmaps.js"></script><script src="https://code.highcharts.com/maps/modules/exporting.js"></script><script src="/res/highcharts/cn-all-sar-taiwan.js"></script><div id="container_map" style="min-width:400px;height:400px"></div><script> $(function () { // Prepare demo data $.post("/statistics",{ type:3, queryType:window.parent.mapId },function(GetData) {// console.log(GetData); var data = []; var toName="",toValue=""; if(GetData.data){ $(GetData.data).each(function(k,v){ $(v).each(function(key,value){ if(key==0) toName = toName==""?value:toName+","+value if(key==1) toValue = toValue==""?value:toValue+","+value }); }); } var tempName = toName.split(","); var tempValue = toValue.split(","); for(var i=0;i<tempName.length;i++){ data.push( { name:tempName[i].replace("省","").replace("市",""), value:parseInt(tempValue[i]) } ); }// console.log(data);// {// name: "广东",// value: 1// }, {// name: "北京",// value: 1// }// ]; // Initiate the chart $('#container_map').highcharts('Map', { title: { text: '区域人数分布' },// subtitle : {// text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js">China with Hong Kong, Macau, and Taiwan</a>'// }, mapNavigation: { enabled: true, buttonOptions: { verticalAlign: 'bottom' } }, colorAxis: { min: 0 }, series: [{ data: data, mapData: Highcharts.maps, joinBy: 'name', name: '地区人数', states: { hover: { color: '#BADA55' } }, dataLabels: { enabled: true, format: '{point.name}' } }] }); $("#container_map text:last").hide(); }); });</script></body></html>
cn-all-sar-taiwan.js<script src="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script>
0 0
- hightChart 的一些实现
- HightChart实现二维数组
- HightChart的helloWorld程序
- Hightchart 实现 polar 雷达图
- hightChart去除水印的方法
- HightChart的坐标轴（Axis）
- HightChart的数据列（Series）
- HightChart的HTML标签（labels）
- 纪念一下曾经的监控系统：ELK+HightChart
- hightchart 改变点的颜色，分段显示不同颜色
- hightchart 报表
- HightChart颜色
- Hightchart小技巧
- JQuery+ HightChart+Ajax
- HightChart图例(Legend)
- hightChart中文API
- echart hightchart 区别
- hightchart导出中文乱码
- MVP举例说明
- 灰帽子Python 学习记录 4
- 庞氏骗局
- MySQL 教程
- IplImage结构
- hightChart 的一些实现
- RESTful API 设计指南
- 调试时源文件与模块生成时的文件不同
- (OK) scratch/manet-docker.cc
- 聊聊 Linux 中的五种 IO 模型
- javascript中定时器的使用
- 埃及分数问题
- 百度之星2016资格赛 D
- c语言学习笔记7之基本运算符
