0

Candlestick Google Chart を実装しようとしていますが、AJAX を使用して別のデータでチャートをリロードできるようにしたいと考えています。Google が提供するサンプルからいくつかのコードをコピーしましたが、何か不足しています - 不適切にフォーマットされた JSON に関係していると思います。これが私の呼び出しコードです：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <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', {'packages':['corechart']});

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

      function drawChart() {
      var jsonData = $.ajax({
          url: "http://www.mydomain.com/chart_data.php",
          dataType:"json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }


    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <div style="width: 900px;">
        <div style="float: right;">&gt;&gt;</div>
        <div style="float: left;">&lt;&lt;</div>
    </div>
  </body>
</html>

chart_data.php は次のようになります。

{

    "rows": [

        {c:[{v: 'Mon'}, {v: 12634}, {v: 12818.9}, {v: 12695.3}, {v: 12818.9}]},

        {c:[{v: 'Tue'}, {v: 12583.7}, {v: 12694.8}, {v: 12632}, {v: 12795.7}]},

        {c:[{v: 'Wed'}, {v: 12559.6}, {v: 12617.4}, {v: 12598.5}, {v: 12764.7}]},

        {c:[{v: 'Thu'}, {v: 12415.8}, {v: 12598.5}, {v: 12442.5}, {v: 12670.2}]},

        {c:[{v: 'Fri'}, {v: 12309.6}, {v: 12442.9}, {v: 12369.4}, {v: 12539.5}]}

    ]

}

おそらくJSONデータのフォーマットが間違っていると思いますか？しかし、ローソク足チャートに入力する方法のサンプルは見当たりませんでした。

これに関するヘルプは大歓迎です。ありがとうございました！

4

2 に答える 2

1

これがあなたを助けることを願っています、

// first change google.visualization.DataTable to google.visualization.arrayToDataTable and JSON   format not perfect.

      <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {

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


var array=$.parseJSON( jsonData);
 var data =google.visualization.arrayToDataTable(array,true);


        var options = {width: 400, height: 240};

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


      }

      google.setOnLoadCallback(drawVisualization);
    </script>

chart_data.php json は次のようになります。

[["Mon",12634, 12818.9, 12695.3, 12818.9], ["Tue", 12583.7, 12694.8, 12632, 12795.7],["Wed", 12559.6, 12617.4, 12598.5, 12764.7],["Thu", 12415.8, 12598.5, 12442.5, 12670.2],["Fri", 12309.6, 12442.9,12369.4, 12539.5]]

詳しくはこちら

于 2012-06-28T06:12:12.967 に答える