立即注册 登录
Highcharts 中文社区 返回首页

wendingzhou的个人空间 https://bbs.hcharts.cn/?21037 [收藏] [复制] [分享] [RSS]

日志

柱形图异步三级下钻

已有 405 次阅读2017-3-29 14:03 |个人分类:下钻

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>物力资源统计柱形图</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/jquery-easyui-1.3.2/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/jquery-easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/scripts/jquery-easyui-1.3.2/demo/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/highcharts/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/highcharts/js/data.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/highcharts/js/drilldown.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/highcharts/js/exporting.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<style type="text/css">
*{
  font-size: 4px; 
}
html{
height: 100%;
}
body {
  height: 93%;
  padding: 30px 0 0 0; 
/* padding:30px 0 0 0; */
margin: 0;
}
</style>
</head>
<body>
<div style="height: 100%;">
<div id="container" style="min-width:940px;height:100%;">
<script type="text/javascript">
var categories = [];
var datas = [];
var options = {
    chart: {
     renderTo: 'container',
        type: 'column',
        events:{
         drillup: function(e) {
                    // 上钻回调事件
//                     console.log(e.seriesOptions);
                },
                drilldown: function (e) {
                 var newChart=this;
                    if (!e.seriesOptions) {
                        var drilldownsData;
                        if(typeof chart.drilldownLevels!="undefined"&&chart.drilldownLevels.length==1){
                         $.post("${pageContext.request.contextPath}/deviceindexAction!getDeviceSumBySubType.do",
                     {typeId : e.point.id}, function(data) {
                     var convertData;
                     var dataArr=[];
                     if(data==null||data=="[]"){
                     return;
                     }
                    try {
                    convertData = $.parseJSON(data);
                    for(var i=0;i<convertData.length;i++){
                    dataArr.push([convertData[i][1],convertData[i][2]]);
                    }
                    drilldownsData={name:e.point.name,data:dataArr,maxPointWidth:50};
                    } catch (e) {
                    $.messager.alert("提示", data, "info");
                    return;
                    }
                     }
                     );
                        }else{
                        $.post("${pageContext.request.contextPath}/deviceindexAction!getDeviceSumByTypeGroup.do",
                     {groupId : e.point.id}, function(data) {
                     var convertData;
                     var dataArr=[];
                     if(data==null||data=="[]"){
                     return;
                     }
                    try {
                    convertData = $.parseJSON(data);
                    for(var i=0;i<convertData.length;i++){
                    dataArr.push({name:convertData[i][1],y:convertData[i][2],drilldown:true,id:convertData[i][0]});
                    }
                    drilldownsData={name:e.point.name,data:dataArr,maxPointWidth:50};
                    } catch (e) {
                    $.messager.alert("提示", data, "info");
                    return;
                    }
                     }
                     );
                        }
                        newChart.showLoading('加载中,请稍后...');
                        setTimeout(function () {
                         newChart.xAxis[0].names=[];
                         newChart.hideLoading();
                         newChart.addSeriesAsDrilldown(e.point, drilldownsData);
                        }, 1000);
                    }
                }
        }
    },
    title: {
        text: null
    },
    credits: {
     //隐藏官网链接
        enabled: false
    },
    xAxis: {
     type: 'category'
//          categories: [],
//          crosshair: true,
//          labels:{
//           style:{"fontSize": "8px"}
//          }
    },
    yAxis: {
        min: 0,
        allowDecimals:false,//刻度值不予许有小数
//          tickInterval:2000,
        title: {
            text: '数量'
        },
        labels: {
         format: '{value}'
     }
    },
    legend: {
//          align: 'center', //水平方向位置
//          verticalAlign: 'top', //垂直方向位置
//          x: 0, //距离x轴的距离
//          y: 20 //距离Y轴的距离
     enabled: false
    },
    tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}<br>',
            pointFormat: '<span style="color:{point.color}">{point.name}:<b>{point.y:f}</b><br/>'
        },
    plotOptions: {
        series: {
            cursor: 'pointer',
            borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}'
                }
        }
    },
    series: [{name:'物力系统',colorByPoint: true,data:[],maxPointWidth:50}],
    drilldown: {
            series: []
        }
};
$(function () {
Highcharts.setOptions({
        lang: {
            drillUpText: '<< 返回 {series.name}'
        }
    });
loadData(0);
});
function loadData(timeIdx){
//  var columnChart_=$("#container").highcharts();
$.post("${pageContext.request.contextPath}/deviceindexAction!deviceStatisticByTypegroupAjax.do",
{index : timeIdx}, function(data) {
var convertData;
var deviceSum=[];//设备总数
if (data != null) {
try {
convertData = $.parseJSON(data);
for(var i=0;i<convertData.length;i++){
deviceSum.push({name:convertData[i][1],y:convertData[i][2],drilldown:true,id:convertData[i][0]});
}
} catch (e) {
$.messager.alert("提示", data, "info");
return;
}
options.series[0].data=deviceSum;
}
chart = new Highcharts.Chart(options);
}
);
}
</script>
</body>
</html>

路过

雷人

握手

鲜花

鸡蛋

评论 (0 个评论)

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

返回顶部