JS 代码:

var categories = ['0-4', '5-9', '10-14', '15-19',

'20-24', '25-29', '30-34', '35-39', '40-44',

'45-49', '50-54', '55-59', '60-64', '65-69',

'70-74', '75-79', '80-84', '85-89', '90-94',

'95-99', '100 + '];

var chart = Highcharts.chart('container', {

chart: {

type: 'bar'

},

title: {

text: '2015 年德国人口金字塔'

},

subtitle: {

useHTML: true,

text: '数据来源: 1950 ~ 2100 年世界人口金字塔'

},

xAxis: [{

categories: categories,

reversed: false,

labels: {

step: 1

}

}, {

// 显示在右侧的镜像 xAxis (通过 linkedTo 与第一个 xAxis 关联)

opposite: true,

reversed: false,

categories: categories,

linkedTo: 0,

labels: {

step: 1

}

}],

yAxis: {

title: {

text: null

},

labels: {

formatter: function () {

return (Math.abs(this.value) / 1000000) + 'M';

}

},

min: -4000000,

max: 4000000

},

plotOptions: {

series: {

stacking: 'normal'

}

},

tooltip: {

formatter: function () {

return '' + this.series.name + ', age ' + this.point.category + '
' +

'人口: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);

}

},

series: [{

name: '男',

data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,

-2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,

-2176300, -1329968, -836804, -354784, -90569, -28367, -3878]

}, {

name: '女',

data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,

3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,

1447162, 1005011, 330870, 130632, 21208]

}]

});

HTML 代码:

/* css 代码 */

// JS 代码

金字塔图表 html,Highcharts 柱形图(柱状图及条形图)之 金字塔图 演示相关推荐

  1. 地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型

    地图图表.柱状图.条形图.折线图.中国地图.世界地图.省市地图.仪表盘.雷达图.饼图.散点图.瀑布图.气泡图.堆叠图.热力图.桑基图.关系图.漏斗图.Axure原型.rp原型.产品原型.大屏设计必备组 ...

  2. 如何用pyecharts绘制柱状图,条形图,折线图,饼图,环形图,散点图

    简介 pyecharts是一个由百度开源的数据可视化,凭借着良好的互交性,精巧的图表设计,得到了众多开发者的认可,而python是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可视化时, ...

  3. POI Word 图表、柱状图、条形图、折线图、饼图

    poi Excel 图表:https://blog.csdn.net/u014644574/article/details/105695787 1.pom.xml <dependency> ...

  4. excel基础图形笔记(柱状图、条形图、折线图、饼图、散点图、箱线图、漏斗图)

    excel画图小记: 1. 高:10 :宽:16.17:(符合0.618黄金比例) 具体操作:选中图表->右键->设置图标区域格式->大小与属性: 2.看销量排名,一般用条形图(横放 ...

  5. Python——柱状图(条形图、堆叠图)

    目录 1 基本函数 2 竖条形图 3 横条形图 4 并列条形图 5 添加标签 6 堆叠柱形图 1 基本函数 bar(x, height, [width], **kwargs) #竖条形图 barh(x ...

  6. Pyecharts数据可视化之柱状图、条形图、漏斗图,常用配置项

    安装pyecharts pip install pyecharts -U 柱状图 基本柱状图 本次使用jupyter notebook编写代码 # 引入相关包 from pyecharts.faker ...

  7. PhpSpreadsheet 导出Excel图表 生成多列柱状图,自定义配色(原始图和自定义颜色图)

    安装 composer require phpoffice/phpspreadsheet 代码(带自定义颜色) 1.引入包 use PhpOffice\PhpSpreadsheet\Spreadshe ...

  8. 今天的资料里有超实用的Excel图表模板,其中还包含了饼形图、条形图、仪表图、圆环图、折线图、柱形图等12种工作中常用图形~

    今天的资料里有超实用的Excel图表模板,其中还包含了饼形图.条形图.仪表图.圆环图.折线图.柱形图等12种工作中常用图形~

  9. 前端图表制作——HighCharts图表入门

    HighCharts图表入门 HighCharts的作用 ​ 在JavaEE企业级项目开发中,很多项目都会用到数据的统计和图表的展示功能,如:各种股票系统,银行的资金结算,公司的财务报表,等等.如何快 ...

最新文章

  1. 【Go】Go基础(八):结构体和方法
  2. HTML5语言格式,HTML5 自然语言格式的输入表单
  3. Windows下的.NET+ Memcached安装
  4. 域用户权限|安装软件
  5. tensorflow contrib模块_OpenCV DNN 模块-风格迁移
  6. 经典视觉SLAM框架
  7. 康华光电子技术基础第六版习题答案
  8. 集异璧(GEB)第一章WU谜题读后感
  9. ip漂移技术_您的项目是否遭受技术漂移的困扰?
  10. 唐巧iOS博客好文列表
  11. 多米诺DP(双向背包)算法总结
  12. linux ftdi 虚拟,linux ftdi 驱动
  13. 使用Convert命令进行显示转换
  14. 关于FORALLENTRIESIN去重_SAP刘梦_新浪博客
  15. Jzoj1967 聪聪可可
  16. ORACLE 数据、表误删恢复(转)
  17. Android访问中央气象台的天气预报API得到天气数据
  18. 测试wi-fi信号软件是什么,3个免费Wi-Fi实用软件 检测安全查信号
  19. 计算机窗口移动不了怎么办,电脑鼠标拖不动文件怎么办 电脑鼠标拖动不灵敏如何解决...
  20. eclipse+tomcat环境配置

热门文章

  1. 重塑汽车产业价值链,ChinaJoy诚邀造车新势力加盟
  2. 使用swing换一个国际象棋棋盘的实例
  3. linux课程--实验二 Linux 基本命令操作2
  4. Teamvier提示商业用途限制使用的解决方案
  5. 【锁】Latch、lock、 pin的区别
  6. 使用CSS绘制一个平行四边形
  7. 用css写平行四边形
  8. 联想新款小新 Pro 27 一体机 评测 怎么样
  9. 关于VB.net禁用右键菜单的实现
  10. 【综合类型第 26 篇】WebStorm 2019.2.2 下载、安装教程