使用HTML创建图表

时间：2014-11-26 03:44:16

标签： javascript jquery html xslt

尝试使用HTML实现一些柱形图。所以，它接近我，但我不能得到我的列图。这有什么遗漏？

图表日期应在x轴上具有年份（2003,2004），在y轴上具有#CarsSold值（37,63）。同样的方式是其他图表，只有少数元素。

Tnx 

<!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 ......）。无论如何？

1 个答案:

答案 0 :(得分：1)

这是接近理想的解决方案，我的意思是这就是我想要的，但这些品牌名称重叠可能是因为我的第二张图表中列之间的距离太小。如果有人能够迅速解决它会很棒。如何使它看起来更好？

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>

visualize.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; }
相关问题
最新问题