HTML和JavaScript作直方图

最新推荐文章于 2023-09-14 16:11:54 发布
最新推荐文章于 2023-09-14 16:11:54 发布
阅读量2k 收藏 14
点赞数 2
分类专栏： HTML可视化 文章标签： 可视化 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43408020/article/details/109641054
版权

今天，看了一本数据可视化的书觉得还可以，这本书是用前端开发的HTML和JavaScript做数据可视化的。

普通随机直方图

代码如下：

<html>
	<head>
		<title>直方图</title>
	</head>
	<body>
		<svg id="mySVG" width="800" height="600" version="1.1"
			xmlns="http://www.w3.org/2000/svg"></svg>
		<script>
			var x=75,y=300;//定义变量x,y
			var mysvg = document.getElementById("mySVG");//实例化
			var svgrec = new Array();//定义新的数组
			for (var i=0;i<6;i++){
				svgrec[i] = document.createElement("rect");
				mysvg.appendChild(svgrec[i]);
				var h = Math.random()*300;
			svgrec[i].outerHTML="<rect x="+(i*x)+" y="+(y-h)+" width=60 height="+(h)+" Style='fill:red' />";
			}
		</script>
	</body>
</html>

运行结果，如下图：
在这里插入图片描述

直方图的渐进绘制

绘制一个条形
代码1，如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>绘制单个条形块</title>
	</head>
	<body>
		<svg id="mySVG" width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
			<rect x=20 y=20 width=70 height=200 style='fill:red' />
		</svg>
	</body>
</html>

结果，如下图：
在这里插入图片描述
绘制一组相同宽高的条形
代码2，如下：

<html>
	<body>
		<svg id="mySVG" width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
	</body>
		<script type="text/javascript">
			//绘制一组相同宽高的条形图
			var mysvg = document.getElementById("mySVG");
			//var window_height = window.innerHeight;获取屏幕的高度window.innerHeight
			var rec = new Array();
			for (var i=0;i<6;i++){
				var Y = 20;
				rec[i] = document.createElement("rect");
				mysvg.appendChild(rec[i]);
				rec[i].outerHTML="<rect x="+(20+80*i)+" y="+Y+" width='70px' height='200px' style='fill:red'/>";
			}
		</script>
</html>

结果，如下图：
在这里插入图片描述
绘制可变色，可变宽高的条形图
代码3，如下：

<html>
	<body>
		<svg id="mySVG" width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
	</body>
	<script type="text/javascript">
		//绘制可变色，可变高度的条形图
		var Y = 400;//定义变量Y等于400
		var mysvg = document.getElementById("mySVG");
		var rec = new Array();//定义一个数组来存储数据
		for (var i=0;i<6;i++){//创建一个循环
			rec[i] = document.createElement("rect");
			mysvg.appendChild(rec[i]);
			var h=Math.random()*300;//随着循环变化的随机数。
			rec[i].outerHTML="<rect x="+(20+80*i)+" y="+(Y-h)+" width='70px' height="+h+" style='fill:rgb(0,0,"+Math.floor(h)+")'/>";//网页展示
		}
	</script>
</html>

结果，如下图：
在这里插入图片描述
绘制可变多种颜色，可变高度的条形图
代码4，如下：

<html>
	<body>
		<svg id="mySVG" width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
	</body>
	<script type="text/javascript">
		//绘制可变多种颜色，可变高度的条形图。
		var Y = 400;//定义变量Y等于400
		var mysvg = document.getElementById("mySVG");
		var rec = new Array();//定义一个数组来存储数据
		// var col_num1 = Math.floor(Math.random()*255);
		// var col_num2 = Math.floor(Math.random()*255);
		// var col_num3 = Math.floor(Math.random()*255);
		for (var i=0;i<6;i++){//创建一个循环
			var col_num1 = Math.floor(Math.random()*255);
			var col_num2 = Math.floor(Math.random()*255);
			var col_num3 = Math.floor(Math.random()*255);
			rec[i] = document.createElement("rect");
			mysvg.appendChild(rec[i]);
			var h=Math.random()*300;//随着循环变化的随机数。
			rec[i].outerHTML="<rect x="+(20+80*i)+" y="+(Y-h)+" width='70px' height="+h+" style='fill:rgb("+col_num1+","+col_num2+","+col_num3+")'/>";//网页展示
		}
	</script>
</html>

结果，如下图：
在这里插入图片描述
绘制带有数据的直方图
代码5，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"><!--字符集是utf-8-->
		<title>数据可视化直方图</title>
	</head>
	<body>
		<svg id="mySVG" width="800px" height="600px" version="1.1"></svg>
		<script type="text/javascript">
			var mysvg = document.getElementById("mySVG");
			var rec = new Array();//定义一个新的数组
			var txt = new Array();//定义一个新的数组
			for (var i=0;i<6;i++){//循环
				rec[i] = document.createElement("rect");//创建标签rect
				txt[i] = document.createElement("text");//创建标签text
				mysvg.appendChild(rec[i]);
				mysvg.appendChild(txt[i]);
				var h = Math.random()*255;//定义高度
				var r = Math.floor(Math.random()*255);//定义颜色
				var g = Math.floor(Math.random()*255);
				var b = Math.floor(Math.random()*255);//随机颜色
				rec[i].outerHTML="<rect x="+60*i+" y="+(400-h)+" width='42px' height="+h+" style='fill:rgb("+r+","+g+","+b+")'/>";//设置页面展示，还有填充色。
				txt[i].outerHTML="<text x="+(60*i+5)+" y="+(400-h)+">"+Math.floor(h)+"</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
			}
		</script>
	</body>
</html>

结果，如下图：
在这里插入图片描述
我最近在学HTML和JavaScript作数据可视化。
最后，感谢大家前来观看鄙人的文章，文中或有诸多不妥之处，还望大家指出和海涵。

不羁_神话
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
echart绘制直方图+正态分布曲线
wangjinicheng的博客
01-16 4103
echart 直方图+正态分布曲线
使用html快速基于relation-graph实现关系图谱
SDDY_xiao的博客
11-08 1291
relation-graph项目使用典型的vue编程方式开发的组件。涉及到组件挂载，其可视化实现需要基于Vue前端框架，无法在纯html上使用。网上迅速实现代码参考太少，故简单写个html使用模板供大家快速实现可视化。// 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置。// 这里可以参考"Graph 图谱"中的参数进行设置。
数据可视化——JS直方图
weixin_46744761的博客
05-25 1012
数据可视化——JS直方图 用JavaScript实现直方图绘制，数据为2021的春节档电影票房统计（数据来源于豆瓣），代码如下： <html> <body> <h2><center>2021春节档电影票房统计（单位：亿，截止到3.10日20:00）</center></h2> <svg id="mysvg" width=800 height=600>
canvas+echarts.js实现彩色图像的RGB直方图显示
HYY的博客
03-23 2981
由于JS不能直接读取图像像素，故借助HTML5的canvas标签读取图像文件，通过getImageData() 方法可以实现读取图像的像素（8位无符号整型数组）。 获取图像像素的数据（包含RGBA）后，只需遍历数组即可统计其中的RGB三通道的每一位（0 - 255）的个数。 最后利用统计的RGB数据，根据区间段渲染直方图。
d3.js-直方图与坐标轴基础
cxu123321的博客
05-12 660
d3.js直方图与坐标轴基础 LSD_Monkey 这里讲一下怎么样用d3.js，输入一个数据list，根据数据画一个带有坐标轴的简单直方图. 以下是目标效果. a plot 直方图部分 引入d3.<script src="//d3js.org/d3.v4.min.js"></script> 画矢量图需要画布，首先，创建新svg: <script> var width = 800; //定义宽度 var height = 800; //定义.
JavaScript - 基于 Canvas 绘制直方图
qq_29761395的博客
06-11 537
文章目录参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas - Histogram</title> <style type="text/css"> * { /* margin: 0; paddi
HTML5 canvas标签－4 灰度直方图的实现
qq_29426997的博客
09-16 479
图像分析中，灰度直方图是相当有实用价值的东西 制作灰度直方图 首先需要把图片灰度化  详细内容见上一个章节 接下来把数组里每个灰度值出现的次数统计下来 最后进行绘图就可以了 function getHistogram(imgData){ //先灰度化 var data = imgData,detailArr = [],heightOfCanvas =
histogrammi:HTML5+JS技术的直方图生成程序。 教育用途
06-16
直方图 该程序使用数学符号从给定的数据生成正确的直方图。 该程序旨在用于教育用途，但不限于此。 使用的技术是 HTML5 + CSS3，因此不需要依赖项，也不是特定于平台的。 例如，这可以在程序生成的图表中看到（生活在芬兰的 50 岁以下男性的年龄分布） 安装 要安装 Histogram 应用程序，请在下载 .zip 文件。 解压 .zip 文件夹并在浏览器中打开 index.html 文件（不支持 10 岁以上的 Internet Explorer，IE 10 本身的行为有点奇怪。）。 如果您只是提取 index.html 文件，该程序将无法运行，但它需要存档中的所有文件才能运行。 在 Unixes 和 Linux:registered: 平台上解包 解包是在 Unix 类型的平台（例如 Linux:registered:）上完成的，例如： $ unzip histogrammi-master.zip 图形解决方案因确切的发
前端控件宝典：UI组件的完整指南(14)——直方图【源码在文末并附解释】
最新发布
m0_63324772的博客
09-14 81
前端控件宝典：UI组件的完整指南(14)——直方图【源码在文末并附解释】
Vue+D3实现直方图与力导向图
victorie的博客
05-12 1998
文章目录一、基础知识二、环境配置1.node.js安装2.Vue安装3.安装vite：三、Vue+D3绘制直方图和力导向图1.直方图2.力导向图（可拖拽）3.结果展示 一、基础知识 Node.js ：是运行在服务端的 JavaScript，Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 Vue: The Progressive JavaScript Framework 目前最为流行的前端框架之一，不可
html5 直方图、饼图、折线图概念设计，没有采用echar等现有资源，完全自己写的
11-23
由于在百度echart的图形api使用中加入单击事件、双击事件、左右建事件不会，所以自己写，也是坑了
image-search-engine：使用Python，Flask和OpenCV实现的基于内容的图像检索系统
02-04
使用颜色直方图定义图像的颜色内容，使用卡方距离确定两个图像直方图的相似程度。 使用指南 使用其他图像数据集（可选） 在app/static/images填充图像数据库 然后在终端： >> python3 -m venv venv >> source venv...
gpstools:用于HTML5客户端的GPS文件的工具！
05-03
它还会在地图上绘制路线，显示速度和海拔高度图，并生成一个坡度直方图，以显示轨迹中坡度的分布。 一旦选择了一条或多条轨道，您就可以放大地图，以饱满的全屏显示效果欣赏整件事。 产生 如果轨道没有与之关联的...
canvas-plus:建立在画布上的通用Nodebrowser库，用于处理图像
05-07
概述 CanvasPlus是一个通用的Node.js和浏览器库，它在上添加了图像处理功能。 在Node.js中，我们依靠令人惊叹的模块，该... 生成直方图数据 访问EXIF元数据 自动定向 卷积核宏功能包括浮雕，查找边缘，模糊，高斯模糊，
badgraphcritique
06-04
数据可视化 ... 我将图形更改为直方图和树形图。 图表不好的原因如下： 1. 感知上不如条形图准确2.在这样的气泡图中颜色是无用的 直方图显示了这些类的大小分布。 树形图显示了包的类和元素的层次结构。
可视化例子(13)——ECharts堆叠直方图(根据时间动态变化)
Ocean111best的博客
03-18 1863
这是之前做的堆叠柱状图，根据时间进行变化，在这里记录下，等以后需要的时候可以直接在这里面拿代码。 柱状图是线性渐变，主要是这个属性： itemStyle: { color: new echarts.graphic.LinearGradient( //柱子渐变效果 0, 0, 0, 1, ...
nodejs
weixin_46944657的博客
05-20 103
NodeJS简介下载地址安装顺序D3的使用 简介 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 目的：前后端完全分离 后端Python/Java 前端Node.js 下载地址 http://nodejs.cn/download/ 安装N
json 语法_VizJSON：JSON中的图形语法
cuxiong8996的博客
07-07 739
VizJSON是一种标记语言，用于向渲染引擎描述图表，以便引擎可以解释关联的数据并将其显示在图表中。 它在概念上与HTML相似，因为HTML是浏览器可以解释并用来显示网页的通用标记语言。 这样想：VizJSON用于可视化渲染器，而HTML用于浏览器。 本文介绍了开放语言（例如VizJSON）用于描述可视化的优点。 该语言可以用作新的开源软件的基础，该软件可以生成和使用VizJSON作为可视化的...
HTML页面直接显示json 结构
weixin_30535913的博客
10-17 701
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> #songResJson{ border: 1px solid #8d...
html制作成绩直方图
05-14
要制作成绩直方图，你可以使用 HTML、CSS 和 JavaScript。下面是一个简单的示例： HTML： ```html <div id="chart"></div> ``` CSS： ```css #chart { width: 500px; height: 300px; border: 1px solid #ccc; margin: 20px auto; position: relative; } .bar { position: absolute; bottom: 0; width: 20px; background-color: #0099ff; margin: 0 5px; text-align: center; font-size: 14px; color: #fff; } ``` JavaScript： ```javascript // 假设这是成绩列表 var scores = [80, 70, 90, 60, 85, 95, 75, 65, 70, 80]; // 找出最高分和最低分 var maxScore = Math.max(...scores); var minScore = Math.min(...scores); // 计算分数区间 var interval = Math.ceil((maxScore - minScore) / 5); // 统计每个区间的人数 var counts = [0, 0, 0, 0, 0]; scores.forEach(function(score) { var index = Math.floor((score - minScore) / interval); counts[index]++; }); // 创建直方图 var chart = document.getElementById('chart'); for (var i = 0; i < counts.length; i++) { var bar = document.createElement('div'); bar.className = 'bar'; bar.style.height = (counts[i] * 100 / scores.length) + '%'; bar.style.left = (i * 100 / counts.length) + '%'; bar.innerHTML = counts[i]; chart.appendChild(bar); } ``` 这段代码会创建一个高度为 300px、宽度为 500px 的直方图，并根据成绩列表来计算分数区间和每个区间的人数，最终创建出相应的直方条形图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不羁_神话

感谢支持，欢迎交流。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值