<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直方图</title>
</head>
<body>
<!--创建并设置矩形所在的区域大小为1200x800,
如果宽度不够大,在循环画矩形时会不够位置放置 -->
<svg id="myreact" width="1200" height="800"></svg>
<script>
//var x=110,y=800;
var mysvg = document.getElementById("myreact");
//svg为从body里获取的矩形所起的名字
var svgreact = new Array(10);
//命名一个大小为10个元素的数组
for(var i=0; i<10; i++){
//画10个矩阵
svgreact[i] = document.createElement("rect");
//为数组元素创建节点rect
mysvg.appendChild(svgreact[i]);
//获取的矩阵svg的子节点为数组元素的节点
var h = Math.random()*400;
//设置一个随机数,范围为400以内
svgreact[i].outerHTML="<rect x ="+(i*110)+" y="+(800-h)+" width=100 height="+h&
js和d3制作简单的直方图
最新推荐文章于 2021-05-25 09:13:32 发布
本文介绍如何利用JavaScript库D3.js来绘制简单的直方图。通过理解数据、设置SVG画布、定义数据范围以及创建条形,逐步讲解了直方图的制作过程,帮助读者掌握数据可视化的基础技巧。
摘要由CSDN通过智能技术生成