3-Highcharts 3D图之3D柱状图分组叠堆3D图
<!DOCTYPE>
<html lang='en'>
<head>
<title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
<!--<script src="../Highcharts-4.2.5/js/themes/gray.js"></script>主题 -->
<script>
$(function () {
var chart = new Highcharts.Chart({
chart:{
renderTo:'container',//图表描绘出后放到页面的某一具体位置
type:'column',
//边距是指图表的外边与图形区域之间的距离，数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft.
marginTop:80,
marginRight:40,
//3D图像设置项。3D效果需要引入highcharts-3d.js，下载或者在线路径为code.highcharts.com/highcharts-3d.js.
options3d:{
enabled:true,//画图表是否启用3D函数，默认值为：false
alpha:10,//3D图旋转角度，此为α角，内旋角度默认为0
beta:25,//3D图旋转角度，此为β角，外旋角度 默认为0
//图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上下旋转，值越大往外旋转幅度越大，值越小往内旋转越大，depth的默认值为100
//默认是： 100
depth:70,
viewDistance: 25//它定义了观看者在图前看图的距离，它是非常重要的对于计算角度影响在柱图和散列图，此值不能用于3D的饼图，默认值为100
}
},
/************标题***************/
//标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。
//主标图
title: {
text:'我的3D图'
},
//副标题
subtitle: {
},
//plotOptions用于设置图表中的数据点相关属性。
plotOptions: {
column:{
// 是否将每个系列的值叠加在彼此的顶部上。
stacking: 'normal',
depth:25
}
},
/************坐标轴***************/
//所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
//（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
xAxis: {
//获取月份的简称
//categories: Highcharts.getOptions().lang.shortMonths
categories:['A','B','C','D','E']
},
yAxis: {
//是否在正常显示的对立面显示轴。
//正常是垂直坐标轴显示在左边，水平坐标轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个或多个坐标轴。
//opposite: true
},
/*************版权信息**********************/
credits:{
enabled:false // 禁用版权信息
},
/*************数据提示框**********************/
//tooltip: { valueSuffix: '°C' },
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
/************图例***************/
//省略图例会在下面显示
//也可以设置 设置在下方
legend: {
//layout: 'horizontal',//horizontal,vertical
//align: 'center',
//verticalAlign: 'bottom',
//borderWidth: 0
//enabled:false//关闭图例
},
/*****************数据列******************/
/*
series: [
{
name: 'Sales',
//data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
//如果有个值为空的话，只需设为null
data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]
}
]*/
series: [{
name: 'AA',
data: [5, 3, 4, 7, 2],
//此选项允许在堆叠图表中的分组系列。堆栈选项可以是一个字符串或一个数字或其他任何东西，只要分组的系列“堆栈选项”相互匹配。
stack: '1'
}, {
name: 'BB',
data: [3, 4, 4, 2, 5],
stack: '1'
}, {
name: 'CC',
data: [2, 5, 6, 2, 1],
stack: '2'
}, {
name: 'CC',
data: [3, 0, 4, 4, 3],
stack: '2'
}]
});
/*
chart: {
renderTo: 'container',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Chart rotation demo'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
*/
$('#R0').on('change', function(){
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$('#R1').on('change', function(){
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});
function showValues() {
$('#R0-value').html(chart.options.chart.options3d.alpha);
$('#R1-value').html(chart.options.chart.options3d.beta);
}
showValues();
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
<!-- 调节部分 -->
<div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
<table>
<tr>
<td>Alpha Angle</td><!-- 内旋角 -->
<td>
<input id="R0" type="range" min="0" max="45" value="15"/>
<span id="R0-value" class="value"></span>
</td>
</tr>
<tr>
<td>Beta Angle</td><!-- 外旋角 -->
<td>
<input id="R1" type="range" min="0" max="45" value="15"/>
<span id="R1-value" class="value"></span>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE>
<html lang='en'>
<head>
<title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
<!--<script src="../Highcharts-4.2.5/js/themes/gray.js"></script>主题 -->
<script>
$(function () {
var chart = new Highcharts.Chart({
chart:{
renderTo:'container',//图表描绘出后放到页面的某一具体位置
type:'column',
//边距是指图表的外边与图形区域之间的距离，数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft.
marginTop:80,
marginRight:40,
//3D图像设置项。3D效果需要引入highcharts-3d.js，下载或者在线路径为code.highcharts.com/highcharts-3d.js.
options3d:{
enabled:true,//画图表是否启用3D函数，默认值为：false
alpha:10,//3D图旋转角度，此为α角，内旋角度默认为0
beta:25,//3D图旋转角度，此为β角，外旋角度 默认为0
//图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上下旋转，值越大往外旋转幅度越大，值越小往内旋转越大，depth的默认值为100
//默认是： 100
depth:70,
viewDistance: 25//它定义了观看者在图前看图的距离，它是非常重要的对于计算角度影响在柱图和散列图，此值不能用于3D的饼图，默认值为100
}
},
/************标题***************/
//标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。
//主标图
title: {
text:'我的3D图'
},
//副标题
subtitle: {
},
//plotOptions用于设置图表中的数据点相关属性。
plotOptions: {
column:{
// 是否将每个系列的值叠加在彼此的顶部上。
stacking: 'normal',
depth:25
}
},
/************坐标轴***************/
//所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
//（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
xAxis: {
//获取月份的简称
//categories: Highcharts.getOptions().lang.shortMonths
categories:['A','B','C','D','E']
},
yAxis: {
//是否在正常显示的对立面显示轴。
//正常是垂直坐标轴显示在左边，水平坐标轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个或多个坐标轴。
//opposite: true
},
/*************版权信息**********************/
credits:{
enabled:false // 禁用版权信息
},
/*************数据提示框**********************/
//tooltip: { valueSuffix: '°C' },
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
/************图例***************/
//省略图例会在下面显示
//也可以设置 设置在下方
legend: {
//layout: 'horizontal',//horizontal,vertical
//align: 'center',
//verticalAlign: 'bottom',
//borderWidth: 0
//enabled:false//关闭图例
},
/*****************数据列******************/
/*
series: [
{
name: 'Sales',
//data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
//如果有个值为空的话，只需设为null
data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]
}
]*/
series: [{
name: 'AA',
data: [5, 3, 4, 7, 2],
//此选项允许在堆叠图表中的分组系列。堆栈选项可以是一个字符串或一个数字或其他任何东西，只要分组的系列“堆栈选项”相互匹配。
stack: '1'
}, {
name: 'BB',
data: [3, 4, 4, 2, 5],
stack: '1'
}, {
name: 'CC',
data: [2, 5, 6, 2, 1],
stack: '2'
}, {
name: 'CC',
data: [3, 0, 4, 4, 3],
stack: '2'
}]
});
/*
chart: {
renderTo: 'container',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Chart rotation demo'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
*/
$('#R0').on('change', function(){
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$('#R1').on('change', function(){
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});
function showValues() {
$('#R0-value').html(chart.options.chart.options3d.alpha);
$('#R1-value').html(chart.options.chart.options3d.beta);
}
showValues();
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
<!-- 调节部分 -->
<div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
<table>
<tr>
<td>Alpha Angle</td><!-- 内旋角 -->
<td>
<input id="R0" type="range" min="0" max="45" value="15"/>
<span id="R0-value" class="value"></span>
</td>
</tr>
<tr>
<td>Beta Angle</td><!-- 外旋角 -->
<td>
<input id="R1" type="range" min="0" max="45" value="15"/>
<span id="R1-value" class="value"></span>
</td>
</tr>
</table>
</div>
</body>
</html>
3-Highcharts 3D图之3D柱状图分组叠堆3D图的更多相关文章
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
- C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图
C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图 +BIT祝威+悄悄在此留下版了个权的信息说: 最近需要用OpenGL绘制文字,这是个很费时费力的事.一般的思路就是 ...
- 3D游戏图形技术解析(7)——视差映射贴图（Parallax Mapping）【转】
http://www.cnblogs.com/taotaobujue/articles/2781371.html 视差映射贴图(Parallax Mapping) ● 传统纹理贴图的弊端 纹理贴图大家 ...
- 从3D Studio Max导入物体 Importing Objects From 3D Studio Max
原地址:http://game.ceeger.com/Manual/HOWTO-ImportObjectMax.html If you make your 3D objects in 3dsMax, ...
- HighCharts之2D堆面积图
HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...
- FusionCharts，双折线图和双柱状图
一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存. 网上找了好几个贴子,才找到具体用法. 代码整理下,以备不时之需. 效果图-双折线图 效果图-双柱状图 <%@ ...
- cacti气象图调整（批量位置调整、更改生成图大小等）
cacti气象图能够非常直观的看到各个节点的流量.这里用的是CactiEZ中文版 V10 1.调整气象图大小 默认有一个1024像素的背景图可选, 这里我们须要新增一个1600像素的背景图. 背景图自 ...
- 从图(Graph)到图卷积(Graph Convolution)：漫谈图神经网络模型 (二)
本文属于图神经网络的系列文章,文章目录如下: 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (一) 从图(Graph)到图卷积(Graph Convolutio ...
- 从图(Graph)到图卷积(Graph Convolution)：漫谈图神经网络模型 (一)
本文属于图神经网络的系列文章,文章目录如下: 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (一) 从图(Graph)到图卷积(Graph Convolutio ...
随机推荐
- jQuery cookie插件保存用户登陆信息
通过jquery cookie插件保存用户登录信息. 代码: <html> <head> <title>cookies.html</title> ...
- 【转】CSS white-space 属性
定义和用法 white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. 默认值 ...
- Android Material Design:基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出
activity_main.xml: <android.support.design.widget.CoordinatorLayout xmlns:android="http://sc ...
- IE PNG格式的图片不现实的的解决方法
可能是安装某些软件导致注册表缺失png的一些设置 ,网上找了好些办法都是修改注册表的. 终于找到傻瓜式的解决方法:将下面的代码复制到txt中 另存为reg后缀格式,双击运行即可,然后重新打开IE 完事 ...
- N进制数组转换成正整数
给定一个任意长度的数组,其中的元素按照一定的进制(N进制)来转换成正整数 //把数组中的元素按照N进制转换成为正整数 #include <stdio.h> #include <std ...
- 2.css选择器
由第一节的语法结构可以看出css语言的核心思想就是:找到对象,然后对选定的对象进行属性赋值.其中,css中对象的选择,依靠的就是选择器.当掌握了选择器以后,就能够指哪打哪,弹无虚发了. css的选择器 ...
- the usage of key word "static" in java language
---恢复内容开始--- 作用 有时你希望定义一个类成员,使它的使用完全独立于该类的任何对象.通常情况下,类成员必须通过它的类的对象访问,但是可以创建这样一个成员,它能够被它自己使用,而不必引用特定的 ...
- python Django 学习笔记（五）—— Django admin自动管理界面
1,激活管理界面 修改settings.py MIDDLEWARE_CLASSES = ( 'django.middleware.common.CommonMiddleware', 'django.c ...
- “猜你喜欢”是怎么猜中你心思的？
文/Joseph A. Konstan & John Riedl)如今,到网上购物的人已经习惯了收到系统为他们做出的个性化推荐.Netflix 会推荐你可能会喜欢看的视频.TiVo 会自动把节 ...
- 浅谈HAL
参考:http://blog.csdn.net/mr_raptor/article/details/8074549 代码实现:http://blog.csdn.net/mr_raptor/articl ...