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. spring实例化bean三种方式

    我看了这篇博文<https://www.cnblogs.com/zhanglei93/p/6221546.html>,以及自己实践总结了关于spring实例化bean对象的3种方式. 一. ...

  2. 排序算法之NB三人组

    快速排序 思路: 例如:一个列表[5,7,4,6,3,1,2,9,8], 1.首先取第一个元素5,以某种方式使元素5归位,此时列表被分为两个部分,左边的部分都比5小,右边的部分都比5大,这时列表变成了 ...

  3. ansible playbook实践(二)-基础相关命令

    ansible相关的命令: ansible  用来执行ansible管理命令 ansible-doc 用来获取模块的帮助文档 ansible-playbook 当有众多任务时,可编写成playbook ...

  4. 手工搭建基于ABP的框架 - 工作单元以及事务管理

    一个业务功能往往不只由一次数据库请求(或者服务调用)实现.为了功能的完整性,我们希望如果该功能执行一半时出错,则撤销前面已执行的改动.在数据库层面上,事务管理实现了这种完整性需求.在ABP中,一个完整 ...

  5. Codeforces Round #410 (Div. 2)

    Codeforces Round #410 (Div. 2) A B略..A没判本来就是回文WA了一次gg C.Mike and gcd problem 题意:一个序列每次可以把\(a_i, a_{i ...

  6. pandas中的分组技术

    目录 1  分组操作 1.1  按照列进行分组 1.2  按照字典进行分组 1.3  根据函数进行分组 1.4  按照list组合 1.5  按照索引级别进行分组 2  分组运算 2.1  agg 2 ...

  7. python3图像识别库安装与使用

    pytesseract库的安装 因为用的win10,就直说windows上面的安装了.其实就是pip安装就完事了. $ pip install pytesseract 安装了这个还不算完,得安装Tes ...

  8. 将html table 转成 excel

    package com.sun.office.excel; /** * 跨行元素元数据 * */ public class CrossRangeCellMeta { public CrossRange ...

  9. 用UltraISO制作CentOS U盘安装盘

    1    下载UltraISO 网上有很多版本,下个绿色版的就ok了. 下载地址:http://www.pc6.com//softview/SoftView_13698.html 2    下载Cen ...

  10. iOS开发中UIPopoverController的使用详解

    这篇文章主要介绍了iOS开发中UIPopoverController的使用,代码基于传统的Objective-C,需要的朋友可以参考下 一.简单介绍 1.什么是UIPopoverController ...