首页利用jsp css生成一个柱状图

利用jsp css生成一个柱状图

时间: 2023-08-02 10:44:46 浏览: 56

好的，以下是利用 JSP 和 CSS 生成一个简单的柱状图的示例代码： 1. 首先创建一个 JSP 页面，比如叫做 chart.jsp： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>柱状图示例</title> <style type="text/css"> .chart { width: 400px; height: 200px; border: 1px solid black; padding: 10px; box-sizing: border-box; } .bar { height: 100%; width: 20%; background-color: blue; margin-right: 5px; display: inline-block; vertical-align: bottom; box-sizing: border-box; } .label { display: inline-block; text-align: center; width: 20%; box-sizing: border-box; } </style> </head> <body> <div class="chart"> <div class="bar" style="height: 50%;"></div> <div class="bar" style="height: 80%;"></div> <div class="bar" style="height: 30%;"></div> <div class="bar" style="height: 60%;"></div> <div class="bar" style="height: 90%;"></div> <div class="label">1</div> <div class="label">2</div> <div class="label">3</div> <div class="label">4</div> <div class="label">5</div> </div> </body> </html> ``` 2. 在 CSS 样式中定义柱状图的样式，包括容器和柱子的样式。其中，容器的大小为 400x200 像素，每个柱子的宽度为 20%，间距为 5px。柱子的高度通过内联样式进行设置。 3. 在 HTML 中，使用 div 标签来创建柱状图的容器和柱子。柱子的高度通过内联样式来设置，柱子和标签使用 display: inline-block; 和 vertical-align: bottom; 来实现垂直对齐。 4. 在柱子下方添加标签，用于显示柱子所代表的数据。运行代码后，你会看到一个简单的柱状图，其中每个柱子的高度和标签对应数据相关联。你可以根据实际需求修改柱子的数量、高度和标签的内容。