HighCharts之2D金字塔图

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量485 收藏
点赞数
文章标签： javascript ViewUI

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、实例结果
iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
金字塔图表 html,HighCharts之2D金字塔图
weixin_39602976的博客
06-04 613
HighCharts之2D金字塔图1、实例源码Pyramid.html：HighCharts 2D金字塔图$(function(){$('#pyramidChart').highcharts({chart: {type: 'pyramid',marginRight: 100},title: {text: '金字塔分布图',x: -50},plotOptions: {series: {dataLab...
FusionCharts与Highcharts图表类型对比
BTfan123的专栏
04-18 1770
最近在论坛上来看到很多网友在问FusionCharts与Highcharts比较而言，哪个更好，小编觉得在进行图表控件选型时，主要可从图表类型和功能方面来对比FusionCharts与Highcharts。本文主要对比FusionCharts与Highcharts的图表类型。而FusionCharts与Highcharts的功能对比将在接下来的文章中介绍，敬请关注慧都控件网！ 图
热力地图开发
一个简单的故事
11-24 984
地图&大图像前端展示 地图投影/大图片展示 地图投影 由于我们在web端显示的地图基本是二维平面，而地球是一个椭圆求，所以我们需要经过一些投影方式将地图图片显示出来。 椭球体的规则化 Web墨卡托投影 地图的组织方式（金字塔结构） 当图像数据大道一定的级别之后，一次性加载整张所有缩放层级的地图不管是从前后端设备性能还是网络传输来看都是不可能的。而且用户通常不需要查看整张地图，而是...
架构师成长之路
qq_27989563的博客
11-29 329
前言： 哲学家常思考的问题：" 我是谁？"" 我从哪里来？"" 要到哪里去？不只是哲学家，我想每个人都有自己对这三个问题的认知。 如果我们要成为架构师，我们自己要面临的三大问题： 找准自己定位：我是谁？在哪里？ 怎样做好架构师：我要做什么？ 如何搭建架构师知识体系：我该怎么做？ 这里面就是做事方法论：目标（我要做什么），方法（计划）（我该怎么做）, 执行/行动 要成为优秀合格的架构师，必须具备前...
C++可视化和图表库
kupePoem的专栏
09-17 1万+
圆形图表（饼状图），圆环图，柱形图（条形图），直线图，曲线图，梯级线图，趋势线图，曲线拟合图，线间色图，区域图，散布图（散形图），泡沫图，floating box，box-whisker，瀑布图，金融类图表，甘特图表，向量图，雷达图，极线图，rose，XY轴交换（旋转图表）和3D效果等效果。广泛的图表类型- 饼图、甜甜圈、条形图、直线、样条曲线、阶梯线、趋势线、曲线拟合、线间填充、区域、带、散点、气泡、浮动框、盒须、瀑布、轮廓、热图、表面、矢量、金融、甘特图、雷达、极地、玫瑰、金字塔、锥体和漏斗。
前端图形化展示js
TheoGo的专栏
01-27 7970
原文地址：http://www.bi168.cn/thread-11670-1-1.html  在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展，从传统只能依靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、
架构师成长之路 4 --架构师知识体系（方法）
skiwnc的博客
11-12 318
架构师成长之路 4 --架构师知识体系（方法）
前端数据可视化插件大盘点 图表/图谱/地图/关系图全有
hebeind100的博客
01-11 4219
在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展，从传统只能依靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已经越来越规范成熟。我把前端数据可视化分为了五种： 1.图表 2.图谱 3.地图 4...
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件HighCharts绘制2D圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制圆环图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件HighCharts绘制2D半圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制半圆环图形的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
10-20
在本示例中，我们将重点讨论如何使用jQuery插件HighCharts来绘制2D带Label的折线图。 首先，为了使用HighCharts，我们需要引入jQuery库以及HighCharts的JavaScript文件。在HTML的`<head>`标签内，可以看到引入了`...
架构师成长之路(4)--架构师知识体系（方法）
热门推荐
黄规速博客:学如逆水行舟，不进则退
12-10 4万+
前言： 哲学家常思考的问题：" 我是谁？"" 我从哪里来？"" 要到哪里去？不只是哲学家，我想每个人都有自己对这三个问题的认知。 如果我们要成为架构师，我们自己要面临的三大问题： 找准自己定位：我是谁？在哪里？ 怎样做好架构师：我要做什么？ 如何搭建架构师知识体系：我该怎么做？ 这里面就是做事方法论：目标（我要做什么），方法（计划）（我该怎么做）, 执行/行动找准自己定位：我是谁？...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 806
注释很详细，直接上代码……
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 676
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 477
处理vite项目中src和url路径问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2865
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 109
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
highcharts 饼图如何设置图片为背景
05-31
要在 Highcharts 饼图中设置图片为背景，可以通过以下步骤实现： 1. 创建一个对象来存储图片的 URL，例如： ``` var imageUrl = 'https://www.example.com/image.jpg'; ``` 2. 在 chart 的 `chart` 属性中设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值