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. Apache自带的rotatelogs实现日志轮转

    用Apache自带的rotatelogs程序处理apache生成的日志自动截断重新生成,rotatelogs是一个配合Apache管道日志功能使用的简单程序.设置方法如下: 编辑Apache的主配置文 ...

  2. bzoj 3451: Tyvj1953 Normal [fft 点分治 期望]

    3451: Tyvj1953 Normal 题意: N 个点的树,点分治时等概率地随机选点,代价为当前连通块的顶点数量,求代价的期望值 百年难遇的点分治一遍AC!!! 今天又去翻了一下<具体数学 ...

  3. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  4. 小甲鱼OD学习第8讲

    这次我们的任务是破解这个有日期限制的软件 我们可以看到,这个一个有日期限制的软件,如图所示 首先,我们把程序载入OD,我们从字符串搜索入手,选择  所有参考文本字串,如图 我们输入相应的字符串尝试搜索 ...

  5. 阶段小项目1：循环间隔1秒lcd显示红绿蓝

    #include<stdlib.h>#include<stdio.h>#include<string.h>#include<error.h>#inclu ...

  6. 代码从stepping stone搬移到内存

    为什么要搬移代码?如何搬移代码?arm启动流程回顾:2440:这里我们分析的是从nand flash 启动.2440的启动主要依赖于一个部件(SRAM),又名stepping stone.它的地址为0 ...

  7. 训练 smallcorgi/Faster-RCNN_TF 模型（附ImageNet model百度云下载地址）

    1. 下载训练.验证.测试数据和 VOCdevkit,下载地址: http://host.robots.ox.ac.uk/pascal/VOC/voc2007/VOCtrainval_06-Nov-2 ...

  8. Python面向对象篇（2）-继承

    在发表本篇随笔的时候,距离上一次发已经有一个多月了,很多朋友私信我为什么不持续更新了,在这里先跟大家说声抱歉.因为年底的工作较为繁重,实在分不出精力,更重要的也是在思考后面进阶的部分要按怎样的顺序写, ...

  9. Chrome浏览器的使用

    1 切换Tab 方法一: Ctrl+Tab键,标签页往前循环,或者说往右循环.Ctrl+Shift+Tab键,标签页往后循环,或者说往左循环 方法二: Ctrl + 数字键 Ctrl + 1 : 切换 ...

  10. git取消文件跟踪

    在使用git的时候,有些文件是不需要上传的,所以就可以修改   .gitignore 例如: 如果是对所有文件都取消跟踪的话,就是 git rm -r -cached .  //不删除本地文件 git ...