我正在尝试创建一个具有仪表板的谷歌图表，就像：https://google-developers.appspot.com/chart/interactive/docs/gallery/controls，我遇到的问题是我的数据格式错误，我不知道为什么。这是代码。我相信这与google.visualization.DataTable 和 google.visualization.arrayToDataTable
谢谢你的帮助！
.PHP
$result = $conn->query("SELECT
date,
ebay_sales,
amazon_sales,
ssllc_sales
FROM stayingsharpllc_.sales
WHERE date > '2014-09-01'
GROUP BY date
ORDER BY date asc
LIMIT 2;"
);
$rows = array();
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles.
/*
note that one column is in "string" format and another one is in "number" format
as pie chart only required "numbers" for calculating percentage
and string will be used for Slice title
*/
array('label' => 'Date', 'type' => 'string'),
array('label' => 'eBay Sales', 'type' => 'number'),
array('label' => 'Amazon Sales', 'type' => 'number'),
array('label' => 'SSLLC Sales', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['date']);
// Values of each slice
$temp[] = array('v' => (int) $r['ebay_sales']);
$temp[] = array('v' => (int) $r['amazon_sales']);
$temp[] = array('v' => (int) $r['ssllc_sales']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>
这是图表代码
// dashboard
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.DataTable(<?=$jsonTable?>);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Amazon Sales'
}
});
// Create a Column, passing some options
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'width': 800,
'height': 300,
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, columnChart);
// Draw the dashboard.
dashboard.draw(data);
}
和 Divs：
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--this is the div that will hold the pie chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
<div id="table_div"></div>
新的谷歌仪表板使用的日期格式看起来像 new Date(2008,1,28) . 它也不能是字符串格式。它必须采用datetime格式。 我还在研究如何制作一个看起来正确的数组。如果我找到它，将重新发布。
所以答案（至少对我有用）是在查询中格式化我的日期，例如
$result = $conn->query("SELECT
DATE_FORMAT(DATE_SUB(DATE(order_date),INTERVAL 1 MONTH),'Date(%Y, %m, %d)') as date,
然后确保日期不是字符串，而是日期
array('label' => 'Date', 'type' => 'date'),
最后我错过了绑定后的}
dashboard.bind(RangeSlider, Chart);
// Draw the dashboard.
dashboard.draw(data);
}
同样，不确定这是完美的"干净"解决方案，但它对我有用。如果有人有更好的方法，请分享。