Question

我写了下面的代码，允许我绘制图表。

<html>
  <head>

  </head>
  <body>
    <select id="ChartType" name="ChartType" onchange="drawChart()">
 <option value = "PieChart">Select Chart Type
 <option value="PieChart">PieChart
 <option value="Histogram">Histogram
 <option value="LineChart">LineChart
 <option value="BarChart">BarChart
  </select>
  <div id="chart_div" style="border: solid 2px #000000;" ></div>
  <p id="demo"></p>
  <p id="demo1"></p>

          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.

         function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');    
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 4],
          ['Olives', 1],
          ['Zucchini', 5],
          ['Pepperoni', 2]
        ]);

        var a = document.getElementById("ChartType").value;
          document.getElementById("demo1").innerHTML = "You selected: " + a;

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300
                       };

         // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
        chart.draw(data, options);



        }
    </script>
  </body>
</html>

然而，我的价值观是固定的。我想通过向服务器发送请求并获取所需的值从服务器读取这些值，然后将这些值传递给我的代码。有人可以帮我做同样的事吗？

Answer 1

HTML（index.html）代码就像 -

<html>

<head>
</head>

<body>
 <select id="ChartType" name="ChartType" onchange="drawChart()">
 <option value = "PieChart">Select Chart Type
 <option value="PieChart">PieChart
 <option value="Histogram">Histogram
 <option value="LineChart">LineChart
 <option value="BarChart">BarChart
  </select>
<div id="chart_div" style="border: solid 2px #000000;"></div>
<p id="demo"></p>
<p id="demo1"></p>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
var row = [];
var temp;
var stri;
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(getValues);
     function getValues() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        stri = xmlhttp.responseText;
            drawChart();
        }
    };
    xmlhttp.open("GET", "values.php?q=val", true);
    xmlhttp.send();
    }

    function drawChart() {
    var data = new google.visualization.DataTable();
    str = stri.split(",");

    for(i = 0; i<str.length-1; i++)
    {
        if(str[i].split("_")[0] == "Column")
        {
            data.addColumn(str[i].split("_")[1], str[i].split("_")[2]);
        }
        else
        {    
            temp = [str[i].split("_")[1], parseInt(str[i].split("_")[2])];
            row.push(temp);
        }

    }
    data.addRows(row);
    var a = document.getElementById("ChartType").value;
    document.getElementById("demo1").innerHTML = "You selected: " + a;
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300
                   };
    var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));
    chart.draw(data, options);
    }
</script>

PHP（values.php）代码就像 -

<?php
if($_REQUEST["q"]=="val")

// You can get these data from database also.

$a[] = "Column_string_Topping";
$a[] = "Column_number_Slices";
$a[] = "Rows_Mushrooms_3";
$a[] = "Rows_Onions_4";
$a[] = "Rows_Olives_1";
$a[] = "Rows_Zucchini_5";
$a[] = "Rows_Pepperoni_2";

foreach($a as $name)
{
    echo $name.",";
}
?>

将HTML和PHP文件保存在同一目录中。

Answer 2

使用ajax调用（get / post）从服务器获取数据使用响应来填充数据。

使用jquery，get请求看起来像这样 -

$.get('http://you-domain.com/get-data/', function(res){
    // res will contain the data from the server
    // you can use it to update the local data before refrehing the graph.
});

Answer 3

您需要执行ajax调用以从服务器检索数据，然后将返回的json加载到DataTable函数中。

var jsonData = $.ajax({
    url: "getData.php",
    dataType: "json",
    async: false
    }).responseText;

var data = new google.visualization.DataTable(jsonData);

必须以Google图表参考文档here中列出的格式从服务器返回JSON数据。

如何向服务器发送请求并获取数据

3 个答案: