2. 使用Javascript画多个直方图,该直方图为16个矩形组成,高度设置为随机值,并添加文字图例。(结果截图)
时间: 2024-10-09 19:08:45 浏览: 36
在JavaScript中绘制多个直方图,你可以使用HTML5 Canvas API,这是一种用于在网页上动态创建图形的技术。以下是步骤概述:
1. **HTML结构**:
```html
<canvas id="myCanvas"></canvas>
<div id="legend">直方图</div>
```
2. **JavaScript代码**:
```javascript
// 获取 canvas 和 context 对象
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 定义函数生成随机高度
function getRandomHeight() {
return Math.floor(Math.random() * 100); // 随机值范围0到100
}
// 创建直方图数组
const histogram = Array(16).fill().map(() => getRandomHeight());
// 绘制直方图
for (let i = 0; i < histogram.length; i++) {
const x = i * 50;
const y = canvas.height - histogram[i]; // 因为直方图是从顶部向下填充
ctx.fillStyle = '#' + ((Math.random() * 0xffffff) << 0).toString(16); // 随机颜色
ctx.fillRect(x, y, 49, histogram[i]);
}
// 添加图例
const legendDiv = document.getElementById('legend');
legendDiv.textContent = '直方图 - 高度随机';
// 可选:调整样式、显示图片等
```
3. **示例效果**:
由于这是文本环境,无法直接展示图片,但你应该能在浏览器中运行上述代码看到一个由16个随机高度矩形组成的直方图以及简单的文字图例。