Question

CI'm在创建图表时遇到问题。我已阅读了一些教程，并基本上根据它们编写了代码。但问题是图表根本不会显示。我希望在AJAX调用中从SQLite3中检索数据，然后根据该数据绘制图表。它可能是列或饼图，无所谓。我很确定我在JSON上的工作方式存在某种问题，我希望有人帮助我。谢谢！

          #test.html
          -------------------------------------------------------------------------
          <html>
          <head>
          <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
          <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script type="text/javascript">   

           function drawChart() {
                var jsonData = $.ajax({
                url: "test-return.php",
                dataType: "json",
                async: false
           }).responseText;


           document.getElementById('rightDiv').innerHTML = jsonData;

           var jsonData2 = [["FC Internazionale ",24],["AS Roma ",24],["Milan AC ",20],["UC Sampdoria ",19],["US Citt\u00e0 di Palermo",18],["SSC Napoli ",15],["Juventus FC ",16],["Parma FC ",14],["Genoa CFC ",14],["AS Bari ",13],["AC Fiorentina ",13],["SS Lazio ",11],["Calcio Catania ",10],["Cagliari Calcio ",11],["Udinese Calcio ",11],["AC Chievo Verona ",12],["Bologna FC ",10],["Atalanta BC ",9],["AC Siena ",7],["AS Livorno Calcio ",7]];

           var data = google.visualization.arrayToDataTable(jsonData2,true);

           var options = {
                title: 'table 1'
           };

           var chart = new google.visualization.ColumnChart(
                    document.getElementById('chart_div'));
           chart.draw(data, options);
          }
          google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

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

            <div id="rightDiv">query results</div>  
       </body>
       </html>


       #test-return.php
       -----------------------------------------------------------------------------
       <?php
              sqlite code here
              ................
              echo json_encode($row_array);
       ?>

       $row_array output => [["FC Internazionale ",24],["AS Roma ",24],["Milan AC ",20],["UC Sampdoria ",19]......

Answer 1

您必须将数据格式与所选图表类型所需的格式相匹配。按原样，您将拥有3列数据：一个数字，一个字符串和一个数字。 PieChart需要两列数据：第一列应该是＆＃34; string＆＃34;第二个应该是＆＃34; number＆＃34;。 ColumnCharts可以包含任意数量的列：第一列可以是＆＃34; number＆＃34;，＆＃34; date＆＃34;，＆＃34; datetime＆＃34;，＆＃34; timeofday＆＃34;，或＆＃34;字符串＆＃34;，但以下所有列都应为＆＃34; number＆＃34; （通常，也就是说 - 有一些例外与使用列角色有关，这些角色超出了你在这里所做的范围）。

查看您的数据，我推测第一列（样本数据中的1,2,3,4 ......）是一个行号而不是您打算绘制的内容。如果是这种情况，则需要调整服务器端代码以将其删除。如果不是这种情况，您能否提供相关信息，以便我帮助您弄清楚如何使用它？

此外，您的数据缺少列标题。作为结构化，arrayToDataTable方法将获取第一行数据并将其用作列标题，因此您将获得三列标签＆＃34; 1＆＃34;，＆＃34; FC Internazionale＆＃34;，和＃34; 24＆＃34;，你可能不想要。修改服务器端代码以使第一行数据包含列标签，或者在arrayToDataTable调用true中设置第二个参数。

通过使用jsonData = $.ajax(...).responseText;，您绕过了jQuery所做的JSON转换，并将响应的原始文本传递给jsonData。由于您需要使用javascript数组来使用arrayToDataTable方法，因此需要在JSON.parse上调用jsonData将其转换为数组：

var data = google.visualization.arrayToDataTable(JSON.parse(jsonData), true);

使用JSON / JS通过AJAX调用创建Google Chart

1 个答案: