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. ABP官方文档翻译 9.1 EntityFramework集成

    EntityFramework集成 Nuget包 DbContext 仓储 默认仓储 自定义仓储 应用特定的基础仓储类 自定义仓储示例 仓储最佳实践 事务管理 数据存储 ABP可以使用ORM框架,它内 ...

  2. web.xml 文件中一般包括 servlet, spring, filter, listenr的配置的加载顺序

    首先可以肯定 加载顺序与他们在web.xml 文件中的先后顺序无关. web.xml 中 listener 和 serverlet 的加载顺序为 先 listener 后serverlet最终得出结果 ...

  3. Java中native关键字[转]

    原文链接:http://blog.163.com/yueyemaitian@126/blog/static/21475796200701491621267/ 今日在hibernate源代码中遇到了na ...

  4. BZOJ 3550: [ONTAK2010]Vacation [单纯形法]

    有3N个数,你需要选出一些数,首先保证任意长度为N的区间中选出的数的个数<=K个,其次要保证选出的数的个数最大. 好像都是费用流... 单纯性裸题呀... 注意每个数最多选1次 #include ...

  5. 如何使用 Bootstrap 搭建更合理的 HTML 结构

    前言 Bootstrap 的成功不仅在于其简单易用,更在于其样式的规范性以及 HTML 结构的合理性.但是很多人在使用 Bootstrap 时只是依照文档盲目的复制黏贴,并没有仔细考虑每个类的用处,也 ...

  6. Xcode的SVN提示"The request timed out."的解决方案

    问题描述 在利用Xcode的SourceControl进行SVN代码检出时,确认输入地址.帐号密码都正确的情况下,总是提示"The request timed out.".该问题的 ...

  7. python通过一个语句分析几个常用函数和概念

    前言 过年也没完全闲着,每天用一点点时间学点东西,本文为大家介绍几个python操作的细节,包含all.any.for in等操作,以及介绍我解决问题的思路. 一.开篇 先从我看到的一个简单的语句开始 ...

  8. MySQL中四种常用存储引擎的介绍

    MySQL常用的四种引擎的介绍 (1):MyISAM存储引擎: 不支持事务.也不支持外键,优势是访问速度快,对事务完整性没有 要求或者以select,insert为主的应用基本上可以用这个引擎来创建表 ...

  9. Mac下安装php5.6/7.1

    安装环境 OS X EI Capitan 10.11.4 Homebrew安装 homebrew是一个类似于ubuntu中apt-get的一个软件管理器,安装比较简单,在命令行中输入如下代码: rub ...

  10. window 下生成NodeJs(v8.9.3) 的 VS2015 解决方案node.sln

    window 下生成NodeJs(v8.9.3) 的 VS2015 解决方案node.sln 使用步骤 也可以参照 github: https://github.com/nodejs/node/blo ...