基于google 插件 实现的图表(饼图，柱状图，线性图)

饼图：

02.<html>    
03.<head>      
04.  <script type="text/javascript" src="https://www.google.com/jsapi"   ></script>
05.  <script type="text/javascript">
06.   google.load("visualization", "1", {packages:["corechart"]});
07.   google.setOnLoadCallback(drawChart);
08.   function drawChart() {
09.    var data = new google.visualization.DataTable();
10.    data.addColumn('string', 'Task');
11.    data.addColumn('number', 'Hours per Day');
12.    data.addRows(5);
13.    data.setValue(0, 0, 'Work');
14.    data.setValue(0, 1, 11);
15.    data.setValue(1, 0, 'Eat');
16.    data.setValue(1, 1, 2);
17.    data.setValue(2, 0, 'Commute');
18.    data.setValue(2, 1, 2);
19.    data.setValue(3, 0, 'Watch TV');
20.    data.setValue(3, 1, 2);
21.    data.setValue(4, 0, 'Sleep');
22.    data.setValue(4, 1, 7);
23.    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
24.    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
25.   }      
26.  </script>
27.</head>
28.<body>
29.  <div id="chart_div"></div>    
30.</body>  
31.</html>

 柱状图：

03.<html>
04.<head>
05.  <script type="text/javascript" src="https://www.google.com/jsapi"   ></script>
06.<script type="text/javascript">
07.google.load("visualization", "1", {
08.  packages : [ "corechart" ]
09.});
10.google.setOnLoadCallback(drawChart);
11.function drawChart() {
12.  var data = new google.visualization.DataTable();
13.  data.addColumn('string', 'Year');
14.  data.addColumn('number', 'Sales');
15.  data.addColumn('number', 'Expenses');
16.  data.addRows(4);
17.  data.setValue(0, 0, '2004');
18.  data.setValue(0, 1, 1000);
19.  data.setValue(0, 2, 400);
20.  data.setValue(1, 0, '2005');
21.  data.setValue(1, 1, 1170);
22.  data.setValue(1, 2, 460);
23.  data.setValue(2, 0, '2006');
24.  data.setValue(2, 1, 660);
25.  data.setValue(2, 2, 1120);
26.  data.setValue(3, 0, '2007');
27.  data.setValue(3, 1, 1030);
28.  data.setValue(3, 2, 540);
29.  var chart = new google.visualization.ColumnChart(document
30.    .getElementById('chart_div'));
31.  chart.draw(data, {
32.   width :400,
33.   height :240,
34.   title :'Company Performance',
35.   hAxis : {
36.    title :'Year',
37.    titleTextStyle : {
38.     color :'red'
39.    }
40.   }
41.  });
42.}
43.</script>
44.</head>
45.<body>
46.<div id="chart_div"></div>
47.</body>
48.</html>

 线性图：

<html>
03.<head>
04.<script type="text/javascript" src="https://www.google.com/jsapi"   ></script>
05.<script type="text/javascript">
06.google.load("visualization", "1", {
07.  packages : [ "corechart" ]
08.});
09.google.setOnLoadCallback(drawChart);
10.function drawChart() {
11.  var data = new google.visualization.DataTable();
12.  data.addColumn('string', 'Year');
13.  data.addColumn('number', 'Sales');
14.  data.addColumn('number', 'Expenses');
15.  data.addRows(4);
16.  data.setValue(0, 0, '2004');
17.  data.setValue(0, 1, 1000);
18.  data.setValue(0, 2, 400);
19.  data.setValue(1, 0, '2005');
20.  data.setValue(1, 1, 1170);
21.  data.setValue(1, 2, 460);
22.  data.setValue(2, 0, '2006');
23.  data.setValue(2, 1, 860);
24.  data.setValue(2, 2, 580);
25.  data.setValue(3, 0, '2007');
26.  data.setValue(3, 1, 1030);
27.  data.setValue(3, 2, 540);
28.  var chart = new google.visualization.LineChart(document
29.    .getElementById('chart_div'));
30.  chart.draw(data, {
31.   width :400,
32.   height :240,
33.   title :'Company Performance'
34.  });
35.}
36.</script>
37.</head>
38.<body>
39.<div id="chart_div"></div>
40.</body>
41.</html>

需要的js图表库：jsapi.js(22.54K)
http://dl.dbank.com/c0flty3dwo

 

posted on 2012-09-21 14:21  Fancy_huihui  阅读(661)  评论(0)    收藏  举报