Online Demo http://demo.jb51.net/js/jquery_baobiao/index.html
Package download http://xiazai.jb51.net/201101/yuanma/jquery_baobiao.rar
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Tabs"). tabs ();
});
</Script>
<Script type = "text/javascript">
GvChartInit ();
JQuery (document). ready (function (){
JQuery ('# myTable1'). gvChart ({
ChartType: 'areachart ',
GvSettings :{
VAxis: {title: 'ant '},
HAxis: {title: 'month '},
Width: 720,
Height: 300
}
});
JQuery ('# myTable2'). gvChart ({
ChartType: 'linechart ',
GvSettings :{
VAxis: {title: 'ant '},
HAxis: {title: 'month '},
Width: 720,
Height: 300
}
});
JQuery ('# myTable3'). gvChart ({
ChartType: 'barchart ',
GvSettings :{
VAxis: {title: 'ant '},
HAxis: {title: 'month '},
Width: 720,
Height: 300
}
});
JQuery ('# myTable4'). gvChart ({
ChartType: 'columnchart ',
GvSettings :{
VAxis: {title: 'ant '},
HAxis: {title: 'month '},
Width: 720,
Height: 300
}
});
JQuery ('# myTable5'). gvChart ({
ChartType: 'piechart ',
GvSettings :{
VAxis: {title: 'ant '},
HAxis: {title: 'month '},
Width: 720,
Height: 300
}
});
});
</Script>
CSS style
Copy codeThe Code is as follows:
<Style type = "text/css">
Body
{
Text-align: center;
Font-family: Arial, sans-serif;
Font-size: 12px;
}
A
{
Text-decoration: none;
Font-weight: bold;
Color: #555;
}
A: hover
{
Color: #000;
}
Div. easyui-tabs
{
Margin: auto;
Text-align: left;
Width: 720px;
}
Div. clean
{
Border: 1px solid #850000;
}
. Clean td,. clean th
{
Border: 2px solid # bbb;
Background: # ddd;
Padding: 5px 10px;
Text-align: center;
Border-radius: 2px;
}
. Clean table
{
Margin: auto;
Margin-top: 15px;
Margin-bottom: 15px;
}
. Clean caption
{
Font-weight: bold;
}
. GvChart,. clean
{
Border: 2px solid #850000;
Border-radius: 5px;
-Moz-border-radius: 10px;
Width: 720px;
Margin: auto;
Margin-top: 20px;
}
Pre
{
Background: # eee;
Padding: 10px;
Border-radius: 10px;
-Moz-border-radius: 10px;
}
</Style>
Html
Copy codeThe Code is as follows:
<Div class = "easyui-tabs" fit = "true" plain = "true" style = "height: 500px; width: 800px;">
<Div title = "Title1" style = "padding: 10px;">
<H2 id = "area">
Regional Report <Table id = 'mytable1'>
<Caption>
Report Analysis </caption>
<Thead>
<Tr>
<Th>
</Th>
<Th>
January
</Th>
<Th>
February
</Th>
<Th>
March
</Th>
<Th>
April
</Th>
<Th>
May
</Th>
<Th>
June
</Th>
<Th>
July
</Th>
<Th>
August
</Th>
<Th>
September
</Th>
<Th>
October
</Th>
<Th>
November
</Th>
<Th>
December
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Th>
Actually completed
</Th>
<Td>
900
</Td>
<Td>
600
</Td>
<Td>
327
</Td>
<Td>
359
</Td>
<Td>
376
</Td>
<Td>
398
</Td>
<Td>
60 </td>
<Td>
50 </td>
<Td>
404 </td>
<Td>
700 </td>
<Td>
200 </td>
<Td>
500 </td>
</Tr>
<Tr>
<Th>
Scheduled tasks
</Th>
<Td>
1167
</Td>
<Td>
1110
</Td>
<Td>
691
</Td>
<Td>
165
</Td>
<Td>
135
</Td>
<Td>
157
</Td>
<Td>
139
</Td>
<Td>
136
</Td>
<Td>
938
</Td>
<Td>
1120
</Td>
<Td>
55
</Td>
<Td>
55
</Td>
</Tr>
</Tbody>
</Table>
</Div>
<Div title = "Title2" style = "padding: 10px;">
<H2 id = "line">
LineChart <Table id = 'mytable2'>
<Caption>
Report Analysis </caption>
<Thead>
<Tr>
<Th>
</Th>
<Th>
January
</Th>
<Th>
February
</Th>
<Th>
March
</Th>
<Th>
April
</Th>
<Th>
May
</Th>
<Th>
June
</Th>
<Th>
July
</Th>
<Th>
August
</Th>
<Th>
September
</Th>
<Th>
October
</Th>
<Th>
November
</Th>
<Th>
December
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Th>
Actually completed
</Th>
<Td>
900
</Td>
<Td>
600
</Td>
<Td>
327
</Td>
<Td>
359
</Td>
<Td>
376
</Td>
<Td>
398
</Td>
<Td>
60 </td>
<Td>
50 </td>
<Td>
404 </td>
<Td>
700 </td>
<Td>
200 </td>
<Td>
500 </td>
</Tr>
<Tr>
<Th>
Scheduled tasks
</Th>
<Td>
1167
</Td>
<Td>
1110
</Td>
<Td>
691
</Td>
<Td>
165
</Td>
<Td>
135
</Td>
<Td>
157
</Td>
<Td>
139
</Td>
<Td>
136
</Td>
<Td>
938
</Td>
<Td>
1120
</Td>
<Td>
55
</Td>
<Td>
55
</Td>
</Tr>
</Tbody>
</Table>
</Div>
<Div title = "Title3" style = "padding: 10px;">
<H2 id = "bar">
BarChart <Table id = 'mytable3'>
<Caption>
Report Analysis </caption>
<Thead>
<Tr>
<Th>
</Th>
<Th>
January
</Th>
<Th>
February
</Th>
<Th>
March
</Th>
<Th>
April
</Th>
<Th>
May
</Th>
<Th>
June
</Th>
<Th>
July
</Th>
<Th>
August
</Th>
<Th>
September
</Th>
<Th>
October
</Th>
<Th>
November
</Th>
<Th>
December
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Th>
Actually completed
</Th>
<Td>
900
</Td>
<Td>
600
</Td>
<Td>
327
</Td>
<Td>
359
</Td>
<Td>
376
</Td>
<Td>
398
</Td>
<Td>
60 </td>
<Td>
50 </td>
<Td>
404 </td>
<Td>
700 </td>
<Td>
200 </td>
<Td>
500 </td>
</Tr>
<Tr>
<Th>
Scheduled tasks
</Th>
<Td>
1167
</Td>
<Td>
1110
</Td>
<Td>
691
</Td>
<Td>
165
</Td>
<Td>
135
</Td>
<Td>
157
</Td>
<Td>
139
</Td>
<Td>
136
</Td>
<Td>
938
</Td>
<Td>
1120
</Td>
<Td>
55
</Td>
<Td>
55
</Td>
</Tr>
</Tbody>
</Table>
</Div>
<Div title = "Title4" style = "padding: 10px;">
<H2 id = "column">
ColumnChart <Table id = 'mytable4'>
<Caption>
Report Analysis </caption>
<Thead>
<Tr>
<Th>
</Th>
<Th>
January
</Th>
<Th>
February
</Th>
<Th>
March
</Th>
<Th>
April
</Th>
<Th>
May
</Th>
<Th>
June
</Th>
<Th>
July
</Th>
<Th>
August
</Th>
<Th>
September
</Th>
<Th>
October
</Th>
<Th>
November
</Th>
<Th>
December
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Th>
Actually completed
</Th>
<Td>
900
</Td>
<Td>
600
</Td>
<Td>
327
</Td>
<Td>
359
</Td>
<Td>
376
</Td>
<Td>
398
</Td>
<Td>
60 </td>
<Td>
50 </td>
<Td>
404 </td>
<Td>
700 </td>
<Td>
200 </td>
<Td>
500 </td>
</Tr>
<Tr>
<Th>
Scheduled tasks
</Th>
<Td>
1167
</Td>
<Td>
1110
</Td>
<Td>
691
</Td>
<Td>
165
</Td>
<Td>
135
</Td>
<Td>
157
</Td>
<Td>
139
</Td>
<Td>
136
</Td>
<Td>
938
</Td>
<Td>
1120
</Td>
<Td>
55
</Td>
<Td>
55
</Td>
</Tr>
</Tbody>
</Table>
</Div>
<Div title = "Title5" style = "padding: 10px;">
<H2 id = "pie">
PieChart <Table id = 'mytable5'>
<Caption>
Report Analysis </caption>
<Thead>
<Tr>
<Th>
</Th>
<Th>
January
</Th>
<Th>
February
</Th>
<Th>
March
</Th>
<Th>
April
</Th>
<Th>
May
</Th>
<Th>
June
</Th>
<Th>
July
</Th>
<Th>
August
</Th>
<Th>
September
</Th>
<Th>
October
</Th>
<Th>
November
</Th>
<Th>
December
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Th>
2010
</Th>
<Td>
125
</Td>
<Td>
185
</Td>
<Td>
327
</Td>
<Td>
359
</Td>
<Td>
376
</Td>
<Td>
398
</Td>
<Td>
0
</Td>
<Td>
0
</Td>
<Td>
0
</Td>
<Td>
0
</Td>
<Td>
0
</Td>
<Td>
0
</Td>
</Tr>
</Tbody>
</Table>
</Div>
</Div>
Add style and Framework library
Copy codeThe Code is as follows:
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "http://www.google.com/jsapi"> </script>
<Script src = "jquery-1.4.4.min.js" type = "text/javascript"> </script>
<Script src = "jquery. gvChart-1.0.1.min.js" type = "text/javascript"> </script>
<Link href = "../Demo/js/themes/default/tabs.css" rel = "stylesheet" type = "text/css"/>
<Link href = "../Demo/js/themes/icon.css" rel = "stylesheet" type = "text/css"/>
<Script src = "../Demo/js/jquery. easyui. min. js" type = "text/javascript"> </script>
I will share more good things with you in the future. Thank you for your support.
Package and download the code in this article