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

 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html>
+
<html>   
−
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
+
−
<style>
+
−
/* Clear the default wiki settings */
+
−
+
−
#home_logo, #sideMenu { display:none; }
+
−
#sideMenu, #top_title, .patrollink , #bars_item {display:none;}
+
−
#content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
+
−
body {background-color:white; }
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
#globalWrapper{padding:0;}
+
−
        p {margin:0}
+
−
        #HQ_page p{text-align:inherit;}
+
−
        #top_menu_inside #user_item{padding-top:0px;}
+
−
#top_menu_inside{border-left:0px;border-right:0px;width:auto;}
+
−
li{margin-bottom:0;}
+
−
</style>
+
−
 
+
−
 
+
 
<head>   
 
<head>   
 
<meta charset="utf-8">   
 
<meta charset="utf-8">   
Line 23: Line 5:
 
</head>  
 
</head>  
 
<body>   
 
<body>   
−
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
−
<script>
 
−
 
−
var width = 300; //画布的宽度
 
−
var height = 300; //画布的高度
 
  
−
var svg = d3.select("body") //选择文档中的body元素
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/jquery?
−
.append("svg") //添加一个svg元素
+
            action=raw&amp;ctype=text/javascript"></script>
−
.attr("width", width) //设定宽度
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
−
.attr("height", height); //设定高度
+
            action=raw&amp;ctype=text/javascript"></script>
−
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/popper?
−
var dataset = [ 250 , 210 , 170 , 130 , 90 ];
+
            action=raw&amp;ctype=text/javascript"></script>
−
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/ripple?
−
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
+
            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'));
  
−
svg.selectAll("rect")
+
            // 指定图表的配置项和数据
−
  .data(dataset)
+
            var option = {
−
  .enter()
+
                title: {
−
  .append("rect")
+
                    text: ' '
−
  .attr("x",20)
+
                },
−
  .attr("y",function(d,i){
+
                tooltip: {},
−
return i * rectHeight;
+
                legend: {
−
  })
+
                    data: ['Chip', 'Microdroplet', 'Paper']
−
  .attr("width",function(d){
+
                },
−
  return d;
+
                radar: {
−
  })
+
                    // shape: 'circle',
−
  .attr("height",rectHeight-2)
+
                    name: {
−
  .attr("fill","steelblue");
+
                        textStyle: {
−
 
+
                            color: '#fff',
−
</script> 
+
                            backgroundColor: '#999',
−
+
                            borderRadius: 3,
−
</body>
+
                            padding: [3, 5]
 +
                        }
 +
                    },
 +
                    indicator: [{
 +
                        name: 'Even Color',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Technical Realization',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Obvious Color',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Culture Environment',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Bacteria fixation',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Price',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Portable',
 +
                        max: 5
 +
                    }, ]
 +
                },
 +
                series: [{
 +
                    name: ' Radar graph for three potential loaders ',
 +
                    type: 'radar',
 +
                    // areaStyle: {normal: {}},
 +
                    data: [{
 +
                        value: [3, 3, 1, 1, 4, 4,5],
 +
                        name: 'Chip'
 +
                       
 +
                    }, {
 +
                        value: [1, 2, 2, 5, 5, 4,5],
 +
                        name: 'Microdroplet',
 +
                       
 +
                    }, {
 +
                        value: [4, 5, 5, 3, 3, 5,5],
 +
                        name: 'Paper',
 +
                     
 +
                    }]
 +
                }]
 +
            };
  
 +
            myChart.setOption(option);
 +
        </script>
  
 +
</body> 
 
</html>
 
</html>

Latest revision as of 22:15, 13 August 2018

做一个简单的图表