gpt4 book ai didi

jquery - 如何向这个动画 JQuery、CSS 和 HTML 条形图添加更多条形图

转载 作者:太空宇宙 更新时间:2023-11-04 16:09:58 26 4
gpt4 key购买 nike

我正在尝试使用 graph explained in this website在我的网络应用程序中。我想用它来显示我公司每个部门的月度统计数据。所以在图例中我可以列出部门名称(我有 7 个部门)。现在我想在图表中创建 7 个条形,但我无法做到这一点。谁能告诉我如何向图表中添加更多条形图?

我的 HTML 代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1024">
<title>Example 3 - Animated Bar Chart via jQuery</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/03.css">
</head>

<body>
<div class="toggles">
<p><a href="#" id="reset-graph-button">Reset graph</a>
Mouse over the bars to display information.</p>
</div>
<div id="wrapper">
<div class="chart">
<h2>PMOD Divisions' Safety Training Record</h2>

<table id="data-table" border="1" cellpadding="10" cellspacing="0" summary="The effects of the zombie outbreak on the populations of endangered species from 2012 to 2016">
<caption>Population in thousands</caption>
<thead>
<tr>
<td>&nbsp;</td>
<th scope="col">September</th>
<th scope="col">October</th>
<th scope="col">November</th>
<th scope="col">December</th>
</tr>
</thead>
<tbody>
<tr>

<th scope="row">A</th>
<td>4080</td>
<td>6080</td>
<td>6240</td>

</tr>
<tr>
<th scope="row">E</th>
<td>5680</td>
<td>6880</td>
<td>5760</td>
</tr>
<tr>
<th scope="row">D</th>
<td>1040</td>
<td>1760</td>
<td>2880</td>
</tr>
<tr>
<th scope="row">PE</th>
<td>5680</td>
<td>6880</td>
<td>5760</td>
</tr>
<tr>
<th scope="row">OD</th>
<td>5680</td>
<td>6880</td>
<td>5760</td>
</tr>
<tr>
<th scope="row">ES</th>
<td>5680</td>
<td>6770</td>
<td>5760</td>
</tr>
<tr>
<th scope="row">SS</th>
<td>5680</td>
<td>6880</td>
<td>5760</td>
</tr>
</tbody>
</table>
</div>
</div>

<!-- JavaScript at the bottom for fast page loading -->


<!-- Grab jQuery from Google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!-- Example JavaScript -->
<script src="js/03.js"></script>

</body>
</html>

最佳答案

您可以像往常一样向表中添加额外的行。

剩下的就是 CSS 样式。您需要细化几个类的宽度属性:图例、x 轴等。

您还需要为每个条定义无花果类,参见 .fig0 .fig1 等等。

参见 03.css:http://provide.smashingmagazine.com/graph_tut_files/css/03.css

参见 common.css:http://provide.smashingmagazine.com/graph_tut_files/css/common.css

关于jquery - 如何向这个动画 JQuery、CSS 和 HTML 条形图添加更多条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8535945/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com