点击谷歌可视化中的按钮后绘制图表

Drawing a chart after a click of a button in Google visualizaton

本文关键字：绘制 按钮 谷歌 可视化      更新时间：2023-09-26

我正试图弄清楚如何在点击按钮后绘制图表。我的代码似乎有问题。我正在使用谷歌可视化和Javascript来完成这个活动。有人能看一下吗？

代码：

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

此代码出现问题。

我想有一些副本&粘贴问题-下面的代码应该可以工作（我放了一些你可以忽略的测试数据）

< !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 >
相关文章：