尝试使用HTML实现一些柱形图。所以，看起来我已经很接近了，但我只是无法得到我的柱形图。这缺少什么？
图表日期的 x 轴上应包含年份 (2003,2004)，y 轴上的值应为 #CarsSold (37,63)。其他图表也是如此，只是多了一些元素。
交易
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link href="basic.css" type="text/css" rel="stylesheet" />
<link href="visualize.css" type="text/css" rel="stylesheet" />
<link href="visualize-light.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="visualize.jQuery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<th>ID</th>
<th>URL</th>
<th>#CarsSold</th>
<th>year</th>
<th>Brands</th>
</tr>
<tr>
<td>PPP</td>
<td>http://</td>
<td>10</td>
<td>
<table id ="dates" style="margin:auto;border:solid; width:50%">
<caption>Dates</caption>
<thead><tr>
<th scope="col">2003</th>
<th scope="col">2004</th>
</tr></thead>
<tbody><tr>
<td>37</td>
<td>63</td>
</tr></tbody>
</table>
</td>
<td>
<table id ="formats" style="margin:auto;border:solid; width:20%">
<caption>Formats</caption>
<thead><tr>
<th scope="col">fiat</th>
<th scope="col">merc</th>
<th scope="col">bmw</th>
<th scope="col">toyota</th>
<th scope="col">opel</th>
</tr></thead>
<tbody><tr>
<td>3</td>
<td>31</td>
<td>33</td>
<td>19</td>
<td>14</td>
</tr></tbody>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$('#dates').visualize({width: '150px', height: '150px'});
});
$(function(){
$('#formats').visualize({width: '150px',height: '150px'});
});
</script>
</body>
</html>
编辑: 我应该在我的表格中得到这样的图表: http://postimg.org/image/qv7co9lul/
好吧，代码说明了我尝试使用的内容(css，jquery ...)。无论如何？
最佳答案
这接近所需的解决方案，我的意思是这就是我想要的，但只是这些品牌名称重叠，可能是因为我的第二个图表中的列之间的距离太小。如果有人可以快速修复它，那就太好了。怎么让它看起来更好看？
html + js.script
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link href="visualize.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="visualize.jQuery.js"></script>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<th>ID</th>
<th>URL</th>
<th>#CarsSold</th>
<th>year</th>
<th>Brands</th>
</tr>
<tr>
<td>PPP</td>
<td>http://</td>
<td>10</td>
<td>
<table id ="dates" style="display:none">
<caption>Dates</caption>
<thead><tr>
<th scope="col">2003</th>
<th scope="col">2004</th>
</tr></thead>
<tbody><tr>
<td>37</td>
<td>63</td>
</tr></tbody>
</table>
</td>
<td>
<table id ="formats" style="display:none">
<caption>Formats</caption>
<thead><tr>
<th scope="col">fiat</th>
<th scope="col">merc</th>
<th scope="col">bmw</th>
<th scope="col">toyota</th>
<th scope="col">opel</th>
</tr></thead>
<tbody><tr>
<td>3</td>
<td>31</td>
<td>33</td>
<td>19</td>
<td>14</td>
</tr></tbody>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$('#dates').visualize({width: '150px', height: '150px'});
});
$(function(){
$('#formats').visualize({width: '150px',height: '150px'});
});
</script>
</body>
</html>
可视化.css:
/*plugin styles*/
.visualize { border: 1px solid #888; position: relative; background: #fafafa; }
.visualize canvas { position: absolute; }
.visualize ul,.visualize li { margin: 0; padding: 0;}
/*table title, key elements*/
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; }
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px; font-size: 1.1em; }
.visualize ul.visualize-key { list-style: none; }
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px; }
.visualize ul.visualize-key .visualize-key-label { color: #000; }
/*pie labels*/
.visualize-pie .visualize-labels { list-style: none; }
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute; margin: 0; padding:0; }
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }
/*line,bar, area labels*/
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
.visualize-labels-x li span.line, .visualize-labels-y li span.line { position: absolute; border: 0 solid #ccc; }
.visualize-labels-x li { height: 100%; }
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
.visualize-labels-y li { width: 100%; }
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }
/* page styles */
body { font-family: "Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif; font-size:62.5%; }
table { border-collapse: collapse; }
td, th {
text-align: center;
border: 1px solid #ddd;
padding:2px 5px;
}
caption {margin: 0 0 .5em; font-weight: bold; }
/*demo styles*/
table {width: 500px; height: 200px; margin-left: 30px; }
table.accessHide { position: absolute; left: -999999px; }
td, th { font-size: 1.2em; padding: 2px; width: 13%; }
th { background-color:#f4f4f4; }
caption { font-size: 1.5em; }
/*visualize extension styles*/
.visualize { margin: 60px 0 0 30px; padding: 70px 40px 90px; background: #ccc url(../images/chartbg-vanilla.png) top repeat-x; border: 1px solid #ddd; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }
.visualize canvas { border: 1px solid #aaa; margin: -1px; background: #fff; }
.visualize-labels-x, .visualize-labels-y { top: 70px; left: 40px; z-index: 100; }
.visualize-pie .visualize-labels { position: absolute; top: 70px; left: 40px; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { color: #444; font-size: 1.3em; padding-right: 5px; }
.visualize-labels-y li span.line { border-style: solid; opacity: .7; }
.visualize .visualize-info { border: 0; position: static; opacity: 1; background: none; }
.visualize .visualize-title { position: absolute; top: 20px; color: #333; margin-bottom: 0; left: 20px; font-size: 2.1em; font-weight: bold; }
.visualize ul.visualize-key { position: absolute; bottom: 15px; background: #eee; z-index: 10; padding: 10px 0; color: #aaa; width: 100%; left: 0; }
.visualize ul.visualize-key li { font-size: 1.2em; margin-left: 20px; padding-left: 18px; }
.visualize ul.visualize-key .visualize-key-color { width: 10px; height: 10px; margin-top: -4px; }
.visualize ul.visualize-key .visualize-key-label { color: #333; }
关于javascript - 使用 HTML 创建图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27140974/