图片效果

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

<!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 6.5配置IP地址的三种方法

    实验软件环境:虚拟机Vmware Workstation10.0 .CentOS 6.5 32位 1.自动获取IP地址 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分 ...

  2. 3.MongoDB下Windows下的安装

    由于博主目前使用的是Windows的系统,没有使用Linux等其它的系统,因此此安装配置和开发使用,均是在Windows下进行的,以后在使用其它的系统的时候,再将其它系统的配置的使用补充上来. 1.下 ...

  3. 论文阅读（Zhuoyao Zhong——【aixiv2016】DeepText A Unified Framework for Text Proposal Generation and Text Detection in Natural Images）

    Zhuoyao Zhong--[aixiv2016]DeepText A Unified Framework for Text Proposal Generation and Text Detecti ...

  4. node 实现视频播放后端，前端使用video标签，视频文件视频mp4

    var fs = require("fs"), http = require("http"), url = require("url"), ...

  5. java.sql.SQLException: Incorrect key file for table 'C:\Windows\TEMP\#sql578_6e2_68d.MYI'; try to repair it

    java.sql.SQLException: Incorrect key file for table 'C:\Windows\TEMP\#sql578_6e2_68d.MYI'; try to re ...

  6. 使用Python从Markdown文档中自动生成标题导航

    概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...

  7. maven生命周期和插件

    maven生命周期和插件 生命周期 maven的生命周期有三套,互相独立.每个生命周期含有不同阶段,常用如下 clean 清理项目 pre-clean 执行清理前需要完成的工作 clean 清理上一次 ...

  8. Dynamics AX 2012 R2 业务系列-采购业务流程

    在博文Dynamics AX R2 业务系列中,Reinhard对这个系列做了一个规划,下面我们就按照规划开始说业务吧. 国际惯例,从采购开始. 1.采购的主要职责 简单点说,采购的主要职责,是从供应 ...

  9. mysql 数据库故障通过备份恢复模拟

  10. MVVM简介

    如果你对MVVM的概念还是不了解,可以参看下面链接:http://baike.baidu.com/view/3507915.htm 我们以WPF+MVVM的本地桌面程序为背景,这样一来我们可以不去操心 ...