2

何が欠けているのかわかりません。少しの ajax で Google チャート API を実行できないようです。私は何を間違っていますか？

<html>
  <head>      
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   var dataSet =  $.ajax({
        url: "phpdata.php",
            async: false            
    }).responseText;
    var data = google.visualization.arrayToDataTable([
    dataSet
    ]);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }


</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

私のphpデータ：

['年', '固定資産'],

['2009', 1],

['2010', 1.2],

['2011', 1.6]

4

2 に答える 2

1

問題は ajax 呼び出しにある可能性があります。

<html>
  <head>      
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   var dataSet =  [ ['year', 'fixedassets'],['2009', 1],['2010', 1.2],['2011', 1.6]];
    var data = google.visualization.arrayToDataTable(dataSet);
    var options = {
      title: 'Company Performance'
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
    </html>

これは機能するので、既存のコードでは問題ありません。ajax 呼び出しの形式は、減価償却された jQuery 呼び出しの束を使用しており、サーバーにアクセスできなければテストできませんが、次のようなものを試すことができます。

<html>
  <head>      
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
   $.get("phpdata.php", function(response_data) {
            var data = google.visualization.arrayToDataTable([response_data]);
        var options = {
          title: 'Company Performance'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        });
  }


</script>
</head>
<body>
      <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>

それが機能するかどうかを確認します。

あなたが抱えている問題は、 string: が"['year', 'fixedassets'], ['2009', 1], ['2010', 1.2], ['2011', 1.6]"あり、それを array: として評価したいということだと思います[['year', 'fixedassets'],['2009', 1],['2010', 1.2],['2011', 1.6]]。これを解決する簡単だが安全ではない方法は、 を使用することeval()です。あなたは言うでしょう：

$.get("phpdata.php", function(response_data) {
   var data = google.visualization.arrayToDataTable(eval('[' + response_data + ']');

サーバーを完全に制御し、サーバーから送信される可能性のあるユーザー入力を取得していない限り、これは素晴らしいことではありませんが機能します。

これを行う「正しい」方法は、送信しているものを送信する代わりに、サーバーから実際の json を送信し、JSON.parse(response_data).

于 2012-08-02T00:25:19.583 に答える