我正在尝试使用 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> </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/