2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE>
<html lang='en'>
<head>
<title>2-Highcharts 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.
margin:45,
//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:{
depth:25
}
},
/************坐标轴***************/
//所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
//（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
/*xAxis: {
//获取月份的简称
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
//是否在正常显示的对立面显示轴。
//正常是垂直坐标轴显示在左边，水平坐标轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个或多个坐标轴。
opposite: true
},
*/
/*************版权信息**********************/
credits:{
enabled:false // 禁用版权信息
},
/*************数据提示框**********************/
//tooltip: { valueSuffix: '°C' },
tooltip: {
},
/************图例***************/
//省略图例会在下面显示
//也可以设置 设置在下方
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]
}
]
});
/*
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>
2-Highcharts 3D图之3D柱状图带可调试倾斜角度的更多相关文章
- 3-Highcharts 3D图之3D柱状图分组叠堆3D图
<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...
- 4-Highcharts 3D图之3D普通饼图
<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title& ...
- 1-Highcharts 3D图之普通3D柱状图与带空值
<!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...
- 自制裸眼3D图【推荐】
Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...
- 用ChemDraw画3D图的方法
在绘制化学图形的时候,很多的用户都会发现很多的图形都是三维的,这个时候就需要找一款能够绘制3D图形的化学绘图软件.ChemOffice 15.1是最新的化学绘图工具套件,总共有三个组件,其中ChemD ...
- 图数据 3D 可视化在 Explorer 中的应用
本文首发于 NebulaGraph 公众号 前言图数据可视化是现代 Web 可视化技术中比较常见的一种展示方式,NebulaGraph Explorer 作为基于 NebulaGraph 的可视化产品 ...
- 物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课
写在前面的废话: 很久没有更新文章了,这段时间一直忙于项目落地,虽然很忙,但是感觉没有总结,没有提炼的日子,总是让人感觉飘飘忽忽的. 所幸放下一些事,抽出一些时间,把近期的项目做一些整理与记录.也算是 ...
- 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课
开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...
- 多比Web 3D展示（3D机房/3D监控）中间件多比Web 3D展示（3D机房/3D监控）中间件免费下载购买地址
多比3D是实现3D场景搭建的软件开发包,可以创建广泛的3D应用,适用于高端制造.能源.国防军工.教育科研.城市规划及建筑环艺.生物医学等领域的虚拟仿真,应用于虚拟展示.虚拟设计.方案评审.虚拟装配.虚 ...
随机推荐
- xml文件对应的DTD学习
DTD文件: 1.DTD文档主要由(元素,属性,实体,PCDATA,CDATA) 2.声明一个元素:<!ELEMENT 元素名称 (元素内容)> eg: <!ELEMENT pers ...
- STM32F0xx_RTC实时时钟配置详细过程
Ⅰ.概述 今天总结RTC(Real Time Clock)实时时钟相关的知识,顺带将BKP简单总结一下. STM32的RTC模块和时钟配置系统(RCC_BDCR寄存器)处于后备区域,即在系统复位或从待 ...
- 中兴软件编程规范C/C++
Q/ZX 深圳市中兴通讯股份有限公司企业标准 (设计技术标准) Q/ZX 04.302.1–2003 软件编程规范C/C++ 20 ...
- 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发
书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...
- iPhone图标及启动画面大小 xcode5
启动画面 文件名 大小px Default.png 320*480 Default@2x.png 640*960 Default-568h@2x.png 640*1136 图标 文件名 大小px ...
- Ruby使用gets的错误：gets得到的有'\n'，需要使用chomp去掉
gets方法得到的字符串包含一个“\n”回车符,所以我们需要继续使用chomp方法把"\n"回车符去掉
- 算法系列8《Base64》
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,Base64编码可用于在HTTP环境下传递较长的标识信息.在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单 ...
- Java Collections Source Code Series 1 --- 简介
废话开篇 由于项目需要,需要对Java Collections进行系统地了解,所以在此记录下,方便自己,服务他人. Java Collections 简介 Java Collections 框架主要包 ...
- acdream 1738 世风日下的哗啦啦族I
原题链接:http://acdream.info/problem?pid=1738 树套树裸题,如下: #include<algorithm> #include<iostream&g ...
- JavaScript 中怎样判断文本框只能输出英文字母、汉字和数字，不能输入特殊字符！
JS-只能输入中文和英文2008-11-08 10:17在js中用正则表达式对象(RegExp)判断中文 ^[\u0391-\uFFE5]+$英文 ^[A-Za-z]+$中文和英文/^[\u0391- ...