Question

我想弄清楚如何在点击按钮后绘制图表。好像我的代码中存在问题。我使用谷歌可视化和JavaScript来做这个事件。有人可以看一下吗？

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>

这段代码出了点问题。感谢您的帮助。

Answer 1

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

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

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

1 个答案: