可向下钻取的数据统计图

来源：互联网发布：淘宝助理数据包制作编辑：程序博客网时间：2024/05/14 16:53
作为自己的备忘

jsp页面
<%@page import="java.util.ArrayList"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/comm/taglib.jsp"%><!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>统计</title>    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>    <script type="text/javascript" src="js/highcharts.js"></script>    <script type="text/javascript" src="js/exporting.js"></script></head><body><div id="container" style="min-width:700px;height:400px"></div><script>$(function () {var chart;    var colors = Highcharts.getOptions().colors,    categories = null,    name = ' ',    data = null;        $.ajax({type : 'POST',url : '${ctx }/CollectSummarizing/all.json',data : $("form").serialize(),dataType : 'text',beforeSend : function(){},success : function(backData){/* console.log("backData:"+backData); */var myData = eval("("+backData+")");var resultCode = myData.resultCode;if(0==resultCode){var resultData = myData.resultData;/* console.log("resultData:"+resultData); */var myCategories = resultData.categories;var topData = resultData.data;categories = myCategories;data = topData;/* console.log("categories:"+categories);console.log("data:"+data); */chart = initChart();}},error : function(){}});        function setChart(name, categories, data, color) {chart.xAxis[0].setCategories(categories, false);chart.series[0].remove(false);chart.addSeries({name: name,data: data,color: color || 'white'}, false);chart.redraw();    }        function initChart(){    var chart = $('#container').highcharts({            chart: {                type: 'column',                style: {               fontSize:14 // 刻度字体大小                }            },            title: {                text: '一级标题'            },            subtitle: {                text: '二级标题'            },            xAxis: {                categories: categories            },            yAxis: {                title: {                    text: 'y轴标题',                    rotation: 0,                    style: {                    fontSize: '14px',                     fontWeight: 'bold',                   writingMode:'tb-rl'    //文字竖排样式,不支持Firefox                    },                    x: -10                }            },            credits:{                enabled:false // 禁用版权信息           },            plotOptions: {                column: {                    cursor: 'pointer',                    point: {                        events: {                            click: function() {                                var drilldown = this.drilldown;                                if (drilldown) { // drill down                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);                                } else { // restore                                    setChart(name, categories, data);                                }                            }                        }                    },                    dataLabels: {                        enabled: true,                        color: colors[0],                        style: {                            fontWeight: 'bold'                        },                        formatter: function() {                            return "<span style=\"text-shadow: none;font-size: 14px;\">"+this.y+"</span>";                        }                    }                }            },            tooltip: {                formatter: function() {                    var point = this.point;                    if (point.drilldown) {//判断是否是一级数据，总数据量的提示信息（鼠标移到数据图上）                    var s = '数据量:<b>'+ this.y +'MB</b><br/>';                        s += '点击柱状图查看 '+ point.category +' 数据量';                    } else {//向下钻取的数据提示信息                    var s = '数据量:<b>'+ this.y +'MB</b><br/>';                        s += '点击柱状图查看总数据量';                    }                    return s;                }            },            exporting: { //去掉下载按钮            enabled: true             },            series: [{                name: name,                data: data,                color: 'white'            }],            exporting: {                enabled: false//禁用将数据图下载            }        })        .highcharts(); // return chart            return chart;    }});</script></body></html>
返回数据及效果图有空继续补全
0 0