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. 不干胶打印机 www.bgjdyj.com

    不干胶打印机如何保养 不干胶打印机专卖网根据多年的维修经验总结了以下几种保养不干胶打印机的方法: 1.不干胶打印机打印机标签纸不能搁置太长时间,第一容易起静电.第二容易起灰尘2.不干胶打印机的打印头最 ...

  2. Hands-On Machine Learning with Scikit-Learn and TensorFlow---读书笔记

    去年在北京参加了一次由O'Reilly和Cloudera联合举办的大数据会议Strata Data Conference,并有幸获得了O'Reilly出版的Hands-On Machine Learn ...

  3. 100、RESTful API

    本篇导航: RESTful RESTful API设计 基于django实现 基于Django Rest Framework框架实现 一.RESTful REST与技术无关,代表的是一种软件架构风格, ...

  4. mongodb进阶

    一.游标 先插入一张表的数据 for(i=0; i<100; i++) { db.c.insert({x : i}); } 定义一个游标 var cursor = db.c.find(); 以循 ...

  5. HEOI2016 题解

    HEOI2016 题解 Q:为什么要在sdoi前做去年的heoi题 A:我省选药丸 http://cogs.pro/cogs/problem/index.php?key=heoi2016 D1T1 树 ...

  6. BZOJ 1434: [ZJOI2009]染色游戏

    一开始想这不$SG$裸题...然后发现100组数据...然后发现连通块是任意的求$SG$貌似要暴力枚举.... 然后想了一下1维,手动打表,每次就是队当前所有异或后缀和求$mex$,好像就是$lowb ...

  7. BZOJ 2073: [POI2004]PRZ [DP 状压]

    传送门 水题不解释 这道题的主要目的在于记录一个枚举子集的技巧 #include <iostream> #include <cstdio> #include <cstri ...

  8. ZOJ1450 BZOJ1136 BZOJ1137 HDU3932[最小圆覆盖]

    Minimal Circle Time Limit: 5 Seconds      Memory Limit: 32768 KB You are to write a program to find ...

  9. s5pv210 的启动

    1.开发板已启动从0x0获取数据(内部64k的硬盘,里面含有三星固化的BL0段代码),将其读到a8软核中,进行运算,主要用于初始化时钟,96k的内部IRAM.并负责 指定启动设备(通常为外部硬盘),从 ...

  10. mysql 军规 （转载）

    导语 来自一线的实战经验 每一条军规背后都是血淋淋教训 不要华丽,只要实用 若有一条让你受益,慰矣 主要针对数据库开发人员 总是在灾难发生后,才想起容灾的重要性 总是在吃过亏后,才记得曾经有人提醒过 ...