图片效果

***************代码部分******************************************************

<!doctype html>
<html>

<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script type="text/javascript">
$(function() {
var global = {};
global.app = {};
global.ui = {};

Highcharts.setOptions({
lang: {
drillUpText: '返回'
}
});

var _data = [
["1", 500],
["2", 246],
["3", 54],
["4", 137],
["5", 317],
["6", 87],
["7", 11],
["8", 89],
["9", 80],
["10", 62],
["11", 84],
["12", 80],
["13", 74],
["14", 10],
["15", 70]
];
var _data2 = [
["1", 300],
["2", 296],
["3", 54],
["4", 177],
["5", 117],
["6", 74]
];

global.ui.chart = {
stackColumn: function(id, title, value, data, drilldownSeries) {
$(id).highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 5,
beta: 0,
depth: 50,
viewDistance: 25
}
},
title: {
text: title,
style: "font-size:12px;"
},
xAxis: {
type: "category"
},
yAxis: {
min: 0,
title: {
text: value,
align: 'high'
},
labels: {
enabled: false
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
},
showInLegend: false
}
},
credits: {
enabled: false
},
series: data,
drilldown: {
drillUpButton: _drillUpButton,
series: drilldownSeries
}
});
}
};
global.ui.chart.stackColumn("#container", "a", "a", [{
name: "1",
color:'#95ceff',
data: [{
name: "2012年",
y: 200,
drilldown: 'year'
}, {
name: "2013年",
y: 300,
drilldown: 'year'
}, {
name: "2014年",
y: 400,
drilldown: 'year'
}, {
name: "2015年",
y: 150,
drilldown: 'year'
}, {
name: "2016年",
y: 50,
drilldown: 'year'
}]
}, {
name: "2",
color:'#ffbd2e',
data: [{
name: "2012年",
y: 40,
drilldown: 'year2'
}, {
name: "2013年",
y: 58,
drilldown: 'year'
}, {
name: "2014年",
y: 60,
drilldown: 'year'
}, {
name: "2015年",
y: 85,
drilldown: 'year'
}, {
name: "2016年",
y: 60,
drilldown: 'year'
}]
}], [{
id: 'year',
name: "1",

data: _data
}, {
id: 'year2',
name: "2",

data: _data2
}]);
});
</script>
</head>

<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

</html>

********************************************************************

highCharts钻取功能官方教程地址：http://www.hcharts.cn/docs/basic-drilldown

hightcharts 3d 堆积图下钻的更多相关文章

  1. 第四篇：R语言数据可视化之折线图、堆积图、堆积面积图

    折线图简介 折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图 本例选用如下测试数据集: 绘制方法是首先 ...

  2. echarts如何做出堆积图总计的效果

    首先说下,我这这数据是假数据,实际是公司做图的一部分数据自己修改了下下,不涉及泄密什么的. 第一.echarts本身是没有这个在柱子上面加total的这点大家默认下就好了,因为我不是什么前端专职程序员 ...

  3. 【Excel】绘图案例_常见复合图：簇状图+堆积图+折线图

    前言 最近有朋友让我帮忙用excel画图,老实说我很讨厌用excel画图,点来点去,复杂一些还不能复用,非常繁琐.当然,入门也很简单.需求时不同城市.不同产品的2016和2017销量及环比数据,这应该 ...

  4. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  5. Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

    Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...

  6. Echarts4+EchartsGL 3D迁徙图（附源码）

    最近遇到些Echarts迁徙图问题,在实现二维地图的迁徙图后开始开发3D迁徙图,在网上一查,发现3D版本迁徙图资料较少,自己研究并借鉴一些资料后写了一个小demo,希望能帮大家少走些弯路,共同学习. ...

  7. 神奇的AI：将静态图片转为3D动图

    近日我们从外媒获得消息,位于莫斯科的三星AI中心和Skolkovo科学技术研究所的研究人员发表了一篇新论文,详细介绍了从单个静止人像照片生成3D动画人像的创建.与此前能够生成照片般逼真肖像的人工智能A ...

  8. 基于HTML5实现3D热图Heatmap应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...

  9. FusionCharts 3D环饼图报错

    1.在设计FusionCharts 3D环饼图时,出现错误,图显示不出来,具体错误如下图: 2.经过检查,发现声明的变量和下面引用的变量不一致 var doughnut2D = new FusionC ...

随机推荐

  1. centos 安装pptp

    1. 安装依赖 ppp yum -y install ppp 2. 编译安装pptpd wget http://jaist.dl.sourceforge.net/project/poptop/pptp ...

  2. 偶遇到 java.util.ConcurrentModificationException 的异常

    今天在调试程序 遇到了如此问题 贴上代码来看看稍后分析 List<String> list = null;boolean isUpdate = false;try { list = JSO ...

  3. linux vim

    wq   强制性写入文件并退出.即使文件没有被修改也强制写入,并更新文件的修改时间.x    写入文件并退出.仅当文件被修改时才写入,并更新文件修改时间,否则不会更新文件修改时间.

  4. android Dialog重绘

    String title = ""; if(itemInfo!=null) title = "\n\""+itemInfo.itemSSID+&quo ...

  5. [转]IntelliJ IDEA 使用心得与常用快捷键

    IntelliJ IDEA 使用心得与常用快捷键 那种酸爽,根本说不出来—————————————————————————— by: Jimi没有BondJimi是谁? 就是洒家啊! 刚开始学习写Ja ...

  6. Java里能用session吗？

    1.Session是服务器端存储的,Js里不能使用. 2.一般Session的实现需要依赖客户端的Cookie来储存一个SessionId,客户端每次请求服务器都会带上这个Cookie,这样服务器端就 ...

  7. 使用git 更新线上代码

    先本地代码合并://1合并分支git branch//2查看taggit tag //3添加tagcloud_crm]$ git tag -a v1.0.2 -m "0902"// ...

  8. The connection to adb is down,and a server error has occured.解决办法---------------------亲测有效

    认真读error: 办法一: 点击项目右键->Android tools ->Fix Project Properties,检查项目属性 办法二: 设备管理器,查看是否存在adb进程 如果 ...

  9. android ContentObserver

    android 设置飞行模式  :  长按关机键 3 秒. 工作中,需要开启一个线程大量的查询某个数据库值发送了变化,导致的开销很大,后来在老大的指点下,利用了 ContentObserver完美的解 ...

  10. iBatis框架batch处理优化 (转)

    为什么要做batch处理        这个问题我就不解释了,因为我想你们肯定能比我解释的更好!如果你真的不知道,那就到Google上去搜索一下吧☻Oracle回滚段    这个问题偶也不很明白,只是 ...