图片效果

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

<!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. 中英文维基百科语料上的Word2Vec实验

    最近试了一下Word2Vec, GloVe 以及对应的python版本 gensim word2vec 和 python-glove,就有心在一个更大规模的语料上测试一下,自然而然维基百科的语料进入了 ...

  2. windows2008吃尽内存的解决办法

    最近才用上windows2008,之前一直用的是windows2003,发现系统运行一段时间后,内存吃紧,赶紧打开资源查看器,发现当前运行的程序占有内存都很小,后经查资料,原来是被windows200 ...

  3. C语言pow函数编写

    C语言pow函数编写 #include<stdio.h> double chaoba(double f,double q); //声明自定义函数 void main(void) { dou ...

  4. Google Code Jam Round 1A 2015 解题报告

    题目链接:https://code.google.com/codejam/contest/4224486/ Problem A. Mushroom Monster 这题题意就是,有N个时间点,每个时间 ...

  5. 我的第二个FluentNHibernate例子with Knockout

    在上一篇我的第一个FluentNHibernate例子的基础上,我们用上knockoutjs 1用nuget添加knockoutjs包 2用nuget添加json.net包 3..在Index.csh ...

  6. 什么是JAVAbean

    JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员属性 ...

  7. sdk、jdk、jre、jvm、jdt、cdt分别都是什么东西

    1.sdk是什么 sdk,全称是 software development kit 中文译为软件开发工具包.kit 在英文中有工具箱,设备包,成套工具的意思. 从名字就可以看出sdk作为一个工具箱,其 ...

  8. c#常见的错误集合

    1:a>b>c是不合法的,是不是合法的呢? 2 优先级是这样的:算术>关系>逻辑>三目>赋值:位运算比较乱 这句话是对是错

  9. IUS database

    仿真中的database主要存放关于signal transition以及时间点的信息. IUS中的的database包括: 1) SHM, Verilog/VHDL/mixed-language的d ...

  10. Python字符串格式化

    一.使用格式化符来格式化字符串: Python支持的所有格式化符 格式化符 意义 'd' 返回要格式化对象的十进制表示,如果可以 'i' 返回要格式化对象的十进制表示,如果可以 'o' 返回要格式化对 ...