Difference between revisions of "Team:SJTU-BioX-Shanghai/HP test page"

 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<html> 
 +
<head> 
 +
<meta charset="utf-8"> 
 +
<title>做一个简单的图表</title> 
 +
</head>
 +
<body> 
  
−
<html>
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/jquery?
 +
            action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
 +
            action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/popper?
 +
            action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/ripple?
 +
            action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/bootstrap?
 +
            action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/nav?
 +
            action=raw&amp;ctype=text/javascript"></script>
 +
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/echarts?
 +
            action=raw&amp;ctype=text/javascript"></script>
 +
        <script type="text/javascript">
 +
            // 基于准备好的dom，初始化echarts实例
 +
            var myChart = echarts.init(document.getElementById('radar'));
  
−
<head>
+
            // 指定图表的配置项和数据
−
<meta http-equiv="refresh" content="1800;URL='pigeondone.html'">
+
            var option = {
−
</head>
+
                title: {
−
 
+
                    text: ' '
−
<body bgcolor="#ffffff">
+
                },
−
 
+
                tooltip: {},
−
<script type="text/javascript">
+
                legend: {
−
 
+
                    data: ['Chip', 'Microdroplet', 'Paper']
−
  var _gaq = _gaq || [];
+
                },
−
  _gaq.push(['_setAccount', 'UA-40053177-1']);
+
                radar: {
−
  _gaq.push(['_trackPageview']);
+
                    // shape: 'circle',
−
 
+
                    name: {
−
  (function() {
+
                        textStyle: {
−
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+
                            color: '#fff',
−
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+
                            backgroundColor: '#999',
−
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+
                            borderRadius: 3,
−
  })();
+
                            padding: [3, 5]
−
 
+
                        }
−
</script>
+
                    },
−
 
+
                    indicator: [{
−
<font face = "Arial">
+
                        name: 'Even Color',
−
<center>
+
                        max: 5
−
<hr width=25%>
+
                    }, {
−
<img src=sbolpicgen.png width=475>
+
                        name: 'Technical Realization',
−
<h1>
+
                        max: 5
−
    Pigeon
+
                    }, {
−
</h1>
+
                        name: 'Obvious Color',
−
<h3>
+
                        max: 5
−
Design Visualizer for Synthetic Biology
+
                    }, {
−
</h3>
+
                        name: 'Culture Environment',
−
<hr width=25%>
+
                        max: 5
−
</center>
+
                    }, {
−
 
+
                        name: 'Bacteria fixation',
−
<center>
+
                        max: 5
−
<table width=900>
+
                    }, {
−
<tr><td>
+
                        name: 'Price',
−
Syntax:  
+
                        max: 5
−
 
+
                    }, {
−
 
+
                        name: 'Portable',
−
A list of
+
                        max: 5
−
<em>type [name] [color] [nl]</em>
+
                    }, ]
−
 
+
                },
−
where <em>type</em> is one of <em>p, P, c, r, t, T, s, o, >, <, | or - </em>;
+
                series: [{
−
 
+
                    name: ' Radar graph for three potential loaders ',
−
a blank line;
+
                    type: 'radar',
−
 
+
                    // areaStyle: {normal: {}},
−
followed by
+
                    data: [{
−
 
+
                        value: [3, 3, 1, 1, 4, 4,5],
−
<em> name ind | rep name</em>
+
                        name: 'Chip'
−
 
+
                       
−
There are 14 colors labeled 1 to 14. These appear as the third item in each line.
+
                    }, {
−
Even numbers are darker versions of the odd numbered colors in the following order of hues: blue, green, red, orange,
+
                        value: [1, 2, 2, 5, 5, 4,5],
−
purple, yellow, and black.
+
                        name: 'Microdroplet',
−
 
+
                       
−
 
+
                    }, {
−
An ``nl'' as a fourth item removes the label for that element.
+
                        value: [4, 5, 5, 3, 3, 5,5],
−
 
+
                        name: 'Paper',
−
Characters < and > before p and c give inverse p and c.
+
                     
−
 
+
                    }]
−
<br>
+
                }]
−
<h3>
+
            };
−
Color codes:
+
−
</h3>
+
−
<center>
+
−
<img src=colorcode.png width=600>
+
−
</center>
+
−
<br>
+
−
<h3>
+
−
Glyph codes:
+
−
</h3>
+
−
<center>
+
−
<img src=pigeonlist.png width=1300>
+
−
</center>
+
−
 
+
−
<br>
+
−
<br>
+
−
 
+
−
<center>
+
−
 
+
−
<p>
+
−
<b>TIP: You can access Pigeon via Perl using <a href = pigget.txt target = blank>pigget.pl</a>.</b>
+
−
</p>
+
−
 
+
−
<p>
+
−
<b>TIP: <font color="#aa0000">You can provide feedback on Pigeon through the Pigeon Forum <a href=feedback.html target=blank>here</a>.</font></b>
+
−
</p>
+
−
 
+
−
<p>
+
−
<b>TIP: You can find Pigeon examples <a href=pigeonHelp.html target=blank>here</a>.</b>
+
−
</p>
+
−
<p>
+
−
<b>TIP: You can read about Pigeon  <a href=http://pubs.acs.org/doi/abs/10.1021/sb400024s target=blank>here</a>.</b>
+
−
</p>
+
−
 
+
−
<p>
+
−
<b>TIP: <font color="#00cc00"> Try out the new Pigeon GUI <a href=http://pigeon.synbiotools.org target=blank>here</a>.</font></b>
+
−
</p>
+
−
 
+
−
<br>
+
−
<br>
+
−
 
+
−
    <p>You are connecting from 137.122.64.159:37698.</p>
+
−
 
+
−
<form action = "pigeon.php" method = "post" >
+
−
 
+
−
    <p>
+
−
        <textarea name = "desc" rows=10 cols=75/>
+
−
o A 1
+
−
<t t
+
−
<c c2 2
+
−
<r r1 1
+
−
<p p1 6
+
−
s spacer 9
+
−
p p2 2
+
−
r r2 5
+
−
c c1 6
+
−
t t
+
−
o B 1
+
−
z ori 1
+
−
? Amp 1
+
−
v KanR 1
+
−
# Arcs
+
−
c1 rep p1
+
−
c2 rep p2
+
−
y rep c1-p1
+
−
x rep c2-p2
+
−
</textarea>
+
−
 
+
−
    <p>
+
−
        <!-Top arcs only: <input type = "checkbox" checked = "Checked" name = "topOnly" value = "Yes"/>
+
−
       
+
−
        <input type = "submit" value = "Pigeon!"/>
+
−
    </p>
+
−
 
+
−
</form>
+
−
<td><tr>
+
−
</table>
+
−
</center>
+
−
 
+
−
<center>
+
−
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
+
−
</center>
+
−
 
+
−
 
+
−
<!-- Start of StatCounter Code for Default Guide -->
+
−
<!-- Default Statcounter code for Synbiotools.org
+
−
http://synbiotools.org -->
+
−
<script type="text/javascript">
+
−
var sc_project=10903722;
+
−
var sc_invisible=0;
+
−
var sc_security="6fd33081";
+
−
var scJsHost = (("https:" == document.location.protocol) ?
+
−
"https://secure." : "http://www.");
+
−
document.write("<sc"+"ript type='text/javascript' src='" +
+
−
scJsHost+
+
−
"statcounter.com/counter/counter.js'></"+"script>");
+
−
</script>
+
−
<noscript><div class="statcounter"><a title="Web Analytics"
+
−
href="http://statcounter.com/" target="_blank"><img
+
−
class="statcounter"
+
−
src="//c.statcounter.com/10903722/0/6fd33081/0/" alt="Web
+
−
Analytics"></a></div></noscript>
+
−
<!-- End of Statcounter Code -->
+
−
<a
+
−
href="http://statcounter.com/p10903722/?guest=1">stats</a>
+
−
</body>
+
  
 +
            myChart.setOption(option);
 +
        </script>
  
 +
</body> 
 
</html>
 
</html>

Latest revision as of 22:15, 13 August 2018

做一个简单的图表