Highcharts之3D柱状图
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts-3D柱状图举例</title>
<style type="text/css">
#container {
height: 400px;
min-width: 400px;
max-width: 1200px;
margin: 0 auto;
}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-3d.js"></script>
</head> <body>
<div id="container"></div>
<script language="JavaScript">
Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10, //俯瞰角度
beta: 10, //旋转角度
depth: 70 //景深
}
},
title: {
text: '<b>' + '2016年销售额统计表' + '</b>'
},
subtitle: {
text: '来源：万得利公司'
},
plotOptions: {
column: {
depth: 25, //柱状体的厚度
dataLabels: {
enabled: true, //柱状体上显示数额
} },
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths //月份缩写数组
},
yAxis: {
title: {
text: '万元(￥)'
}
},
series: [{
name: '化妆品销售额',
data: [7, 3, 1, 4, 2, 5, 1, 4, 6, 3, 5, 7]
},
{
name: '保健品销售额',
data: [null, 1, 2, 8, 9, 5, 1, 6, 4, 5, 3, 6]
}
]
});
</script> </body> </html>
运行截图：
Highcharts之3D柱状图的更多相关文章
- 3-Highcharts 3D图之3D柱状图分组叠堆3D图
<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...
- 2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...
- 1-Highcharts 3D图之普通3D柱状图与带空值
<!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...
- HighCharts之2D柱状图
1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...
- WPF用SkewTransform画3D柱状图
WPF用SkewTransform画3D柱状图 SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接: http://msdn.microsoft.com/zh-cn/l ...
- extjs+amcharts生成3D柱状图和数据表格使用总结
废话不多说,使用extjs+amcharts创建3d柱状图和数据表实例,如下: 1.首先定义一个数据模型 Ext.define("cacheHijack", { extend : ...
- HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
随机推荐
- FreeRTOS任务函数
FreeRTOS的任务函数原型如下:void ATaskFunction(void *pvParameters); void ATaskFunction(*pvParameters){;; //函数可 ...
- JAVA实现用户的权限管理
一:写在前面 前两天有个同学问我,那个系统不同的用户登陆不同的页面不同,要写很多个页面啊!而每个用户的在系统中拥有不同的权限,可以访问不同的页面是怎么实现的??那低权限的在浏览器输入高权限的人的url ...
- CF293B Distinct Paths 搜索
传送门 首先数据范围很假 当\(N + M - 1 > K\)的时候就无解 所以对于所有要计算的情况,\(N + M \leq 11\) 超级小是吧,考虑搜索 对于每一个格子试填一个数 对于任意 ...
- javascript中forEach()和jquery中each()的区别
forEach是ES5中操作数组的一种方法,主要功能是遍历数组 1.forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身 ...
- bash:express:command not found
重新设置了node_global和node_cache目录后,总是显示command not found 找了几篇博文后,终于解决了这个问题 步骤如下: 1.新建node_global和node_ ...
- OpenTK教程-1绘制一个三角形
OpenTK的官方文档是真心的少,他们把怎么去安装OpenTK说的很清楚,但是也就仅限于此,这有一篇learn opentk in 15的教程(链接已经失效,译者注),但是并不完美.你可以在15分钟内 ...
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- mongo java 踩坑记
为什么会有这么多坑 1. Java会把 id:String = "合法ObjectId" 好心好意的 转为 _id:ObjectId 类型. 2. 为了避免第1点, 我定义了 ...
- Linux下针对服务器网卡流量和磁盘的监控脚本
1)实时监控网卡流量的通用脚本: [root@ceph-node1 ~]# cat /root/net_monit.sh #!/bin/bash PATH=/bin:/usr/bin:/sbin:/u ...
- db2修改最大连接数
查看当前连接数,sample为数据库名db2 list applications for db sample db2 list applications for db sample show deta ...