Question

我正在尝试设计仪表板，我想在这样的标签栏中显示数据，如图所示 enter image description here

我不知道如何嵌入这个。我正在分享我的css文件和html文件，请帮我初始化这样的数据标签栏。

的index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>3G Awareness</title>
        <link rel="stylesheet" href="960.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="template.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="colour.css" type="text/css" media="screen" charset="utf-8" />
        <!--[if IE]><![if gte IE 6]><![endif]-->
        <script src="js/glow/1.7.0/core/core.js" type="text/javascript"></script>
        <script src="js/glow/1.7.0/widgets/widgets.js" type="text/javascript"></script>
        <link href="js/glow/1.7.0/widgets/widgets.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    </head>



    <body>

        <h1 id="head" align="center" style="background-color:blue; color:#FFF"  >3G Awareness</h1>

        <ul id="navigation" style="background-color:white;">
            <li><span class="active">Pre Analysis</span></li>
            <li><a href="#">Data</a></li>

        </ul>
        <section>
        <div id="container" class="box1">
        <div id="info">

        </div>
        <div id="complaint" >

        </div>
        </div>
        </section>


    </body>
</html>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
    $('#info').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '3G and 4G Information'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Pie Share',
                data: [
                  ["3G or 4G General Info",7947  ],
  ["3G Speed Info",365  ],
  ["3G Coverage Info",5222  ],
  ["Zong 3G and 4G Trivia",79  ],
  ["3G Experience Program at Lahore",16  ],
  ["3G Isb/Rwp Info",650  ],
  ["3G Karachi Info",933  ],
  ["Inquiry about 3G launch in other cities",3271  ],
  ["3G Lahore Info",596  ]                
                       ]
            }]
        });
         $('#complaint').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '3G and 4G Complaints'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Pie Share',
                data: [
                             ["3G Coverage Complaint",113  ],
                             ["3G Call Connectivity Complaint",20  ],
                             ["3G Call Connectivity Complaint",20  ],
                             ["3G Data Complaint",102  ],
                             ["3G Packages Related Complaint",17  ],
                             ["3G Settings Complaint",10  ],
                             ["3G Packages Related Complaint",8  ],
                             ["3G Settings Complaint",20  ],
                             ["3G Call Quality Complaint",7  ],
                             ["3G Overcharging Complaint",10  ],
                             ["3G Video Call Complaint",4  ],
                             ["3G Overcharging 3G Actual Overcharging",8  ]  

                       ]
            }]
        });

});
</script>

colours.css

body {
    background:#F7F4E9 url(body.png) repeat-x top center;
}
small {
    color:#888
}

th,#navigation,.active,input[type=submit],.pagination a:hover,.date td a:hover {
    background:#434A48;
    color:#fff
}

select, textarea, input, td {
    background:#fff url(gradient.png) repeat-x 0 -28px
}
tr {
    background-position:0 -18px;
}
#content {
    background-position:0 1px;
}

.active, th, #navigation a, input[type=submit] {
    color:blue;
}

input, select, textarea {
    border-color:#ddd
}

h1,h2,h3,h4,h5,h6 {
    border-color:#ddd
}

a {
    color:#888
}

#head {
    background:##FFFFFF
}

#navigation a:hover {
    background:black
}
#navigation .active {
    background:red
}

.box,.box > .utils a {
    background:#fff;
    border-color:#eee
}
.box > h2 {
    background:url(box-h2.png) repeat-x bottom center #fff
}
#container{
    width:100%;
    height:100%;
    position:relative;
    border:1px solid black;
}
.box{display:block;}
#info, #complaint{float:left;}
.middle{top:100%;margin-top:-50px;/*half of the .box height*/}


.info{left:0;}
.complaint{right:0;}

仪表板中的数据选项卡

0 个答案: