图片效果

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

<!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. 浏览器桌面通知--Notification

    前言 最近项目上要用到浏览器桌面通知,之前虽然知道有这个东西,但是一直没有用过,借此机会了解下桌面通知的机制,在此分享下. 1.权限 首先需要明确的是,不是所有网页都可以发桌面通知的,不然不得烦死,那 ...

  2. 在Sublime中编辑批处理并运行

    在Sublime->Tool->Build System -> New Build System 复制如下代码名保存为 CMD.sublime-build { "cmd&q ...

  3. ACM-ICPC LA 4329 Ping pong（树状数组）

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  4. 使用hbuilder编辑器实现移动app打包

    作为一枚web前端来讲,需要了解的东西太多,需要学习的也太多了,那天因为公司需求,就研究了下移动网站打包成app的方法,这种东西好像是H5出来后就有推出的,因为性功能不行,就没怎么关注,但现在移动互联 ...

  5. 判断访问的是移动端还是PC端,如果是移动端跳转页面

    <script type="text/javascript"> var mobileAgent = new Array("iphone", &quo ...

  6. 。。。学习CSS3的第一个属性border-radius。。。

    学习border-radius,感觉这个文档写的很不错: http://blog.sina.com.cn/s/blog_61671b520101gelr.html

  7. hdu 1559 最大子矩阵

    最大子矩阵 Time Limit: 30000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  8. Java找不到或无法加载主类

    今天用cmd运行一下java出现了找不到或无法加载主类 的问题 javac编译可以通过   java运行不了 原因: 看一下java版本 看一下javac版本: 编译和运行环境的版本不一样报错原来是用 ...

  9. C++预定义字符函数

    利用 get 成员函数可读取文件中的一切字符,包括空白字符.文件结尾.用 >> 读取文件,会自动忽略空白字符(空格.换行符.制表符) C++ 预定义的字符函数(均在 cctype 库中定义 ...

  10. C++ new和delete具体操作符是怎样的

    在C语言中,动态分配内存用 malloc() 函数,释放内存用 free() 函数.如下所示: int *p = (int*) malloc( sizeof(int) * 10 ); //分配10个i ...