来自动态csv文件的Google动态图表

时间:2015-02-09 21:35:58

标签: javascript html google-visualization

我正在尝试制作一个在点击按钮时显示谷歌图表的网页。到目前为止,这是代码

<cfheader name="X-XSS-Protection" value="0">
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
	function Chart(){
	google.load("visualization", "1", {packages:["motionchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);
        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
}
    </script>
  </head>
  <body>
	<content style="float: left;">  
	<div id="chart_div" style="width: 1000px; height: 500px;"></div>
	</content>
	<input type="button" value="Chart" onclick="Chart()"/>
  </body>
</html>

显示图表时没有添加代码,但是使用代码,当按下按钮时,页面变为空白并且我的标签为空。 P.S新到html / javascript

0 个答案:

没有答案