图片效果

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

<!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. react lazyload

    思路: DOM加载时,<img> 标签里,添加data-src路径 = src 路径, src路径 = 本地默认图片路径, DOM加载完成后,监听页面可视区域,有data-src时,就将s ...

  2. 对点餐APP现阶段开发的问题

    团队的成立,基本是一气呵成.但是,github团队的建立却成为 第一个难题,大家对github都不熟,又刚刚好没课时间的任务,大家 已经各有安排,造成时间上的紧急.没有按时.按要求完成github的 ...

  3. PostgreSQL function examples

    warehouse_db=# CREATE TABLE warehouse_tbl(warehouse_id INTEGER NOT NULL,warehouse_name TEXT NOT NULL ...

  4. Leetcode: Matchsticks to Square && Grammar: reverse an primative array

    Remember the story of Little Match Girl? By now, you know exactly what matchsticks the little match ...

  5. hduoj 1251 统计难题

    http://acm.hdu.edu.cn/showproblem.php?pid=1251 统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory ...

  6. JQ 数字验证

    $.fn.extend({ checknum: function (min, max, accurate) { if ($(this).val() != "") { $(this) ...

  7. Windows Phone 六、JSON序列化

    JSON序列化 public class Person { public int Id { get; set; } public string Name { get; set; } public in ...

  8. 终于解决各种动画问题了，感谢雨松MOMO

    http://www.xuanyusong.com/archives/2222 看懂了,什么问题关于动画的都可以解决的,加油!

  9. Python对时间的转换

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...

  10. iOS 开发：利用第三方插件来安装CoCoapods

    引言:通过上一篇博客我们知道了怎么样去通过终端来安装CoCoapods,这一篇我们着重与用第三方插件来安装CoCoapods: 1. 首先在提下链接下载插件 https://github.com/ka ...