在google visualizaton中點擊一個按鈕後繪製圖表

我想弄清楚如何在單擊按鈕後繪製圖表。這似乎是我的代碼中的一個問題。我使用谷歌可視化和JavaScript來做這個事件。有人可以看看嗎？在google visualizaton中點擊一個按鈕後繪製圖表

CODE：

<!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"> 
    <head> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" 
    src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table','piechart','linechart','controls','charteditor']}]}"> 
</script> 

<script type="text/javascript"> 


google.setOnLoadCallback(pieChart); 


function pieChart() { 


     var pieJsonData = $.ajax({ 
      url: "overall_ban_pos_pie_date.php?startdate=2012-01-01&enddate=2012-01-06", 
      dataType:"json", 
      async: false 
      }).responseText; 


     var pieData = new google.visualization.DataTable(pieJsonData);  

     var options = {chartArea:{left:10,top:40,height:200,width:360}, 
    width:300, 
    height:260, 
    title: "Positive Contacts Percentage", 
    titleTextStyle:{fontSize:12}, 
    tooltip:{showColorCode:true}, 
    legend:{textStyle:{fontSize: 10},position:'left'}, 
    pieSliceTextStyle:{fontSize: 10}} 

    var pieChartWrapper = new google.visualization.ChartWrapper({ 
      'chartType': 'PieChart', 
      'containerId': 'pie_div', 
     'dataTable':pieData, 
      'options': options 
     }); 


} 


google.visualization.events.addListener(pieChartWrapper, 'ready', selectHandler); 
function selectHandler(e) { 

pieChartWrapper.draw(); 

} 

</script> 

</head> 
<body style="font-size:62.5%;"> 
    <form> 

Start Date: <input type="text" name="startdate" id="datepicker"/> 
End Date: <input type="text" name="enddate" id="datepicker2"/> 

<input type="button" value="click me!" onclick="pieChart();"/> 


</form> 

<div id="pie_div"></div> 

</body> 
</html>

有什麼地方出了問題這個代碼。感謝您的幫助提前。

來源

2012-03-22 Tristan Jade Awat

嘿特里斯坦，你有沒有找到答案嗎？那麼請在這裏分享以幫助他人。 – 2013-02-11 13:41:20

我認爲有一些複製粘貼&問題 - 下面的代碼應該工作（我把一些你可以忽略測試數據）

< !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" > <head> 

< link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
rel = "stylesheet" 
type = "text/css"/> < script type = "text/javascript" 
src = "http://code.jquery.com/jquery-1.6.2.min.js" > < /script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery - ui.min.js "></script> 
    <meta http-equiv=" 
content - type " content=" 
text/html; 
charset = utf - 8 "/> 
    <script type=" 
text/javascript " src=" 
https: //www.google.com/jsapi"></script> 
< script type = "text/javascript" 
src = "https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table','piechart','linechart','controls','charteditor']}]}" > < /script> 

<script type="text/javascript"> 

var pieChartWrapper = null; 

function pieChart() { 

     var pieJsonData = $.ajax({ 
      url: " 
http: //localhost:3000/test123", 
dataType: "json", 
async: false 
}).responseText; 

var pieData = new google.visualization.DataTable(pieJsonData); 

var pieData = google.visualization.arrayToDataTable([ 
    ['Task', 'Hours per Day'], 
    ['Work', 11], 
    ['Eat', 2], 
    ['Commute', 2], 
    ['Watch TV', 2], 
    ['Sleep', 7] 
]); 

var options = { 
    chartArea: { 
     left: 10, 
     top: 40, 
     height: 200, 
     width: 360 
    }, 
    width: 300, 
    height: 260, 
    title: "Positive Contacts Percentage", 
    titleTextStyle: { 
     fontSize: 12 
    }, 
    tooltip: { 
     showColorCode: true 
    }, 
    legend: { 
     textStyle: { 
      fontSize: 10 
     }, 
     position: 'left' 
    }, 
    pieSliceTextStyle: { 
     fontSize: 10 
    } 
} 

var pieChartWrapper = new google.visualization.ChartWrapper({ 
    chartType: 'PieChart', 
    containerId: 'pie_div', 
    dataTable: pieData, 
    options: options 
}); 

google.visualization.events.addListener(pieChartWrapper, 'ready', selectHandler); 
pieChartWrapper.draw(); 

} 

function selectHandler(e) { 

} 

< /script> 

</head > < body style = "font-size:62.5%;" > <form> 

Start Date: < input type = "text" 
name = "startdate" 
id = "datepicker"/> End Date: < input type = "text" 
name = "enddate" 
id = "datepicker2"/> 

< input type = "button" 
value = "click me!" 
onclick = "pieChart();"/> 


< /form> 

<div id="pie_div"></div > 

< /body> 
</html >

來源

2013-12-09 00:27:49 JariOtranen

不錯！有效：） – Diego 2015-03-08 20:35:35

在google visualizaton中點擊一個按鈕後繪製圖表

回答

相關問題