如何将动态数据加载到谷歌饼图？

Question

我正在使用ajax函数获取数据以呈现Google Pie图表并在javascript中加载这些数据，但有些图表不是如何渲染，但是当我将AJAX输出硬编码到javascript饼图函数时它确实渲染完美。下面是我的代码可以任何人告诉我什么是错的？谢谢你的帮助。

<?php
$sales_data = koolajax.callback(get_asin_repo($asin,$sku));
?>

JS在这里：

// AJAX Output is ['POS', 'Sold This Month'],['AZN CG UK',893],['AZN JT UK',449],['AZN PT UK',1349]

        alert($sales_data);

        //var data = google.visualization.arrayToDataTable([$sales_data]);//This doesn't work

        //This Works
        var data = google.visualization.arrayToDataTable([['POS', 'Sold This Month'],['AZN CG UK',893],['AZN JT UK',449],['AZN PT UK',1349]]);

        var options = {
            title: 'Statistics For '+$asin
        };

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

Answer 1

真的很简单。我需要做的就是以JSON格式从DB获取数据并将其传递给

var data = new google.visualization.DataTable($sales_data);

而不是

var data = google.visualization.arrayToDataTable([$sales_data])

它有效。 谢谢大家的支持和时间............

Answer 2

您必须检查从服务器返回的变量类型，并按照GoogleChart理解的方式对其进行打包。

在您的情况下，您请求google.visualization.arrayToDataTable为您创建一个DataSource实例。但是，静态方法还要求您遵循此规则：

  

此方法采用二维数组并将其转换为a   数据表。见   Google Charts Documentation

所以在调用该例程之前进行检查。

if ( $sales_data instanceof Array )
{
  var willWork = [];
  var entry;
  while ( $sales_data.length )
  {
    entry = $sales_data.shift();
    if ( !(entry instanceof Array) || entry.length < 2 )
      window.alert( 'Incorrect server return. Call support.' );
    willWork.push( entry );
  }
}
else
  window.alert( 'Incorrect server return. Call support.' );

Answer 3

Google饼图从PHP获取数据

我从4小时后一直在搜索如何将数据从PHP填充到谷歌饼图但没有找到任何解决方案，实际上，我的数据格式在PHP中是错误的。 您可以使用以下方式在PHP中准备数据：

function yourFunction(){
    $data = array();
    $data[0] = array("Status", "Revenue");
    $data[1] = array('Pending', 500);
    $data[2] = array('Confirmed', 1000);
    $data[3] = array('Payable', 3000);
    return json_encode($data );
}

解析前端数据：

var obj = JSON.parse(data);
var data = new google.visualization.arrayToDataTable(data);