HighCharts之2D金字塔图

1、实例源码

Pyramid.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D金字塔图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
	 $('#pyramidChart').highcharts({
		 chart: {
	            type: 'pyramid',
	            marginRight: 100
	        },
	        title: {
	            text: '金字塔分布图',
	            x: -50
	        },
	        plotOptions: {
	            series: {
	                dataLabels: {
	                    enabled: true,
	                    format: '<b>{point.name}</b> ({point.y:,.0f})',
	                    color: 'black',
	                    softConnector: true
	                }
	            }
	        },
	        legend: {
	            enabled: false
	        },
	        series: [{
	            name: '人数',
	            data: [
	                ['星期一',12],
	                ['星期二',121],
	                ['星期三',265],
	                ['星期四',22131],
	                ['星期五',623231],
	                ['星期六',5545459],
	                ['星期日',51245125]
	            ]
	        }]
	    });
  });
</script>
</head>
<body>
   <div id="pyramidChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、实例结果

HighCharts之2D金字塔图的更多相关文章

  1. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  2. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  3. HighCharts之2D半圆环图

    HighCharts之2D半圆环图 1.实例源码 HalfDonut.html: <!DOCTYPE html> <html> <head> <meta ch ...

  4. HighCharts之2D圆环图

    HighCharts之2D圆环图 1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset ...

  5. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  6. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  7. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  8. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  9. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

随机推荐

  1. python下用OpenCV的圆形检测

    写在文章前 这些天因为工作需要要学习图像检测,笨笨的我啥都不会要盯着OpenCV重头开始学(:′⌒`),甚至查资料能力都很弱弱〒▽〒 夸一下我最好的男票(*^▽^*)  男盆友也不是做图像处理的 但是 ...

  2. angular js $post,$get请求传值

    困扰了我好几天的问题!!! 刚开始学play框架,在向后台传值时,一直不成功! 当你用$POST传递一个参数时: HTML: <button ng-click=test()>测试</ ...

  3. jQuery应用操作之---网页选项卡(tabs)

    示例: <div class="tab"> <div class="tab_menu"> <ul> <li class ...

  4. 学习dos命令行总结

    dir:列出当前目录下的所有文件及文件夹. md 文件夹:创建文件夹 rd 文件夹:删除文件夹 echo 文件内容>文件名(扩展名):创建带文件内容的新文件 echo 文件内容>>文 ...

  5. java文件监控[转]

    原文链接:http://blog.csdn.net/dancen/article/details/7786987#comments 问题:存在两个文件目录,且称之为源目录和目标目录,需要不定期将源目录 ...

  6. BZOJ 2287. [HZOI 2015]疯狂的机器人 [FFT 组合计数]

    2287. [HZOI 2015]疯狂的机器人 题意:从原点出发,走n次,每次上下左右不动,只能在第一象限,最后回到原点方案数 这不煞笔提,组合数写出来发现卷积NTT,然后没考虑第一象限gg 其实就是 ...

  7. Win10编译SqlCipher步骤

    准备工作 Visual Studio 2015,其他版本未验证,估计问题不大 ActiveState ActivePerl,用于编译OpenSSL Mingw,在官网下载minimum install ...

  8. 使用 RxJS 实现一个简易的仿 Elm 架构应用

    使用 RxJS 实现一个简易的仿 Elm 架构应用 标签(空格分隔): 前端 什么是 Elm 架构 Elm 架构是一种使用 Elm 语言编写 Web 前端应用的简单架构,在代码模块化.代码重用以及测试 ...

  9. 极大似然估计（MLE)

    基本思想 模型已定,参数未知 根据已存在的样本,挑选(求出)能让样本以最大概率发生的参数 极大似然估计和最小二乘法最大区别之一 极大似然需要知道概率密度函数(离散型叫分布律) 若总体X属离散型,其分布 ...

  10. redis新手入门，摸不着头脑可以看看<二>

    对<Redis开发与运维>的理解--下文中引号部分来自该书,略有修改 P19.  Redis有序集合(图2-1) "Redis有序集合和集合一样也是某种类型元素的集合,不重复.不 ...