运用googleapi做图（折线图 饼图）

<script type=text/javascript src=http://www.google.cn/jsapi></script> <script type=text/javascript> google.load(visualization, 1, {packages:[annotatedtimeline,corechart]}); google.setOnLoadCallback(drawChart); function drawChart() {

//开始画总TimeLine var data = new google.visualization.DataTable(); data.addColumn(datetime, Date); data.addColumn(number, FREQUNCY); data.addColumn(string, title); data.addRows([ [new Date(2012,10,28,18,0,0), 120, 山东科技大学，王春秋], [new Date(2012,10,28,19,30,0), 250, 山东科技大学，运动会], [new Date(2012,10,28,20,0,0), 400, 山东科技大学，山科大，考研], [new Date(2012,10,28,20,30,0), 288, 山东科技大学，山科，宿舍], [new Date(2012,10,28,22,0,0), 300, 山东科技大学，钓鱼岛], [new Date(2012,10,28,23,0,0), 150, undefined , null] ]);

var options={ //注意不是option，可能是个类名 displayAnnotations:true, displayAnnotationsFilter:true };

var chart = new google.visualization.AnnotatedTimeLine(document.getElementById(chart_div)); chart.draw(data,options);

//开始画分类表 chart_detail var data_detail = new google.visualization.DataTable(); data_detail.addColumn(datetime, Date); //此处必须指定为datetime类型，否则精确到天 data_detail.addColumn(number,HAHA); data_detail.addColumn(number,SHIT);

data_detail.addRows([ [new Date(2012,10,28,18,0,0), 50, 70], [new Date(2012,10,28,19,30,0), 100, 150], [new Date(2012,10,28,20,0,0), 220, 180], [new Date(2012,10,28,20,30,0), 188, 100], [new Date(2012,10,28,22,0,0), 120, 180], [new Date(2012,10,28,23,0,0), 50, 100] ]);

var options_detail={ //注意不是option，可能是个类名 colors:[orange,blue], displayRangeSelector:false, displayZoomButtons:false, thickness:3 };

var chart_detail= new google.visualization.AnnotatedTimeLine(document.getElementById(chart_detail_div)); chart_detail.draw(data_detail,options_detail); //开始画PieChart（没有问题） var data_pie= google.visualization.arrayToDataTable([ [Emotions, Count], [YEAR~~~~!!, 24], [OH~~NO~!!, 36], [WHATEVER~, 40] ]);

var options_pie = { title: 情感分析图, is3D:true };

var piechart = new google.visualization.PieChart(document.getElementById(pie_div)); piechart.draw(data_pie, options_pie); //添加事件实现联动效果 google.visualization.events.addListener(chart,rangechange,function(){ chart_detail.setVisibleChartRange(chart.getVisibleChartRange().start,chart.getVisibleChartRange().end); });

//下边动，上边也动 google.visualization.events.addListener(chart_detail,rangechange,function(){ chart.setVisibleChartRange(chart_detail.getVisibleChartRange().start,chart_detail.getVisibleChartRange().end); }); } </script> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","/ajax/demo_post.asp",true); xmlhttp.send(); } </script>

//调用的时候只要保证把相应的id写到相应的位置就可以了