Google.visualization.dashboard 不使用 json 数组 php 呈现

Posted 2023-02-24

技术标签:

【中文标题】Google.visualization.dashboard 不使用 json 数组 php 呈现【英文标题】：Google.visualization.dashboard not rendering with json array php 【发布时间】：2020-09-28 07:38:04 【问题描述】：

我从一个 mysql 查询中传递一个编码的 json 数组来渲染一个 google.visualization.dashboard。我几乎可以肯定问题出在我的阵列上，但我找不到在哪里。当我直接绘制图表谷歌图表（例如google.visualization.PieChart）时，该代码有效，但在我使用仪表板/控件包装器/图表包装器类时无效。

这让我相信问题出在我的数组结构上，或者 google.visualization.dashboard 要求数据表的填充方式与图表不同。

php 代码（loadpiechart.php）：

$table['cols'] = array(
    array('label' => 'NZ Crime', 'type' => 'string'),
    array('label' => 'Value', 'type' => 'number'),
);

$rows=array();
while($r=mysqli_fetch_assoc($res))
    $temp=array();
    $temp[]=array('v'=> $r['Offence']);
    $temp[]=array('v' => $r['Total']);
    $rows[]=array('c' => $temp);

$table['rows'] = $rows;
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
echo $jsonTable;

这给了我以下数组[]

"cols":["id":"A","label":"NZ Crime","type":"string","id":"B","label":"Value","type":"number"],"rows":["c":["v":" Acts intended to cause injury","v":97],"c":["v":" Sexual assault and related offences","v":44515],"c":["v":" Dangerous or negligent acts endangering persons","v":3016],"c":["v":" Abduction, harassment and other related offences against a person","v":859],"c":["v":" Robbery, extortion and related offences","v":14157],"c":["v":" Unlawful entry with intent\/burglary, break and enter","v":2641],"c":["v":" Theft and related offences","v":59323],"c":["v":" Fraud, deception and related offences","v":136932],"c":["v":" Illicit drug offences","v":9726],"c":["v":" Prohibited and regulated weapons and explosives offences","v":22994],"c":["v":" Property damage and environmental pollution","v":7074],"c":["v":" Public order offences","v":58483],"c":["v":" Offences against justice procedures, government security and government operations","v":46105],"c":["v":" Miscellaneous offences","v":19084]]

最后是 html 代码。

html>
  <head>           
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
      google.charts.load('current', packages:['corechart', 'table', 'controls']);

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

    function drawTable() 
         var jsonData = $.ajax(
             url: "loadpiechart.php",
             dataType:"json",
             async: false
             ).responseText;

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

      var table = new google.visualization.ChartWrapper(
          'chartType': 'Table',  
          'containerId': 'table_div',
      );

      var chart = new google.visualization.ChartWrapper(
         'chartType': 'PieChart',  
          'containerId': 'chart_div',
          'view': 'columns': [0, 1],
           );

      var control = new google.visualization.ControlWrapper(
            'controlType': 'CategoryFilter',
            'containerId': 'control_div',
            'options': 
                'filterColumnIndex': 0,
            
      );

      var dashboard = new google.visualization.Dashboard(
                document.getElementById('dashboard_div'));
      dashboard.bind([control], [table,chart]);
      dashboard.draw(data);
    
    </script>
  </head>
 <body>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <p style="padding-left: 1em"><strong>NZ Crime Stats</strong></p>
  <table class="columns">
    <tr>
      <td>
        <div id="control_div" style="padding-left: 15px"></div>
      </td>
    </tr><tr>
      <td>
        <div id="chart_div" style="padding-top: 15px"></div>
      </td><td>
        <div id="table_div" style="padding-top: 30px"></div>
      </td>
    </tr>
  </table>
</div>  
  </body>
</html>

【问题讨论】：

我看到的唯一小问题是您没有在 PHP 代码中设置适当的标头，我建议在回显 JSON 结果之前添加 header('Content-Type: application/json');。仪表板和图表的数据结构与in the docs 所述相同：“仪表板接受数据表中的数据，与图表相同。”。这是带有您的代码的working fiddle，唯一的变化是使用静态数据而不是 AJAX。谢谢。我也能够让它与静态数据一起工作。我通过添加 jQuery 找到了使用原始代码的解决方案。很好，你解决了。我仍然建议从 async:false 更改为 success() 方法，因为同步调用会在请求期间锁定浏览器。它们也被标记为deprecated and may issue a warning in the Console。感谢您的解释，我已经修改了我的代码以包含您的更改。非常感谢。 【参考方案1】：

我建议将 AJAX 调用更改为非阻塞异步调用，并在 success() 方法中调用绘图例程：

function drawTable() 

  $.ajax("https://gist.githubusercontent.com/Moonbird-IT/da4c7d76a69eb250478bb55b5d2360f5/raw/9dbf9d92981a3c9b71906dd3a680a2cdeca7c4aa/googlecharts.json", 
    dataType: "json",
    success: function(jsonData) 

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

我更新了您的代码以使用更改后的建议，here 是它的工作小提琴。

【讨论】：

感谢您的加入。我也用我的原始代码找到了解决方案。【参考方案2】：

我的问题是我没有调用 jQuery。我添加了这行代码，它适用于我的原始代码加上这个添加。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

链接此处获取 google.visaulization 文档https://developers.google.com/chart/interactive/docs/php_example

【讨论】：

以上是关于Google.visualization.dashboard 不使用 json 数组 php 呈现的主要内容，如果未能解决你的问题，请参考以下文章