Question

我有一个php文件，它从SQL表中提取数据，然后将其添加到json编码的表中。然后，我使用Dashboard / Control / Chart Wrapper类将其读入谷歌图表表格可视化。但是，当我尝试将filterColumnlabel设置为php / json代码中我的Columns的一个标签时，我得到错误：

“一个或多个参与者未能画出”

和

“无效的列标签：Car”

我的json表SEEMS格式正确。

$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
    array('label' => 'Date', 'type' =>'string'),
    array('label' => 'Car', 'type' =>'string'),
    array('label' => 'Total Cost', 'type' =>'number'),
    array('label' => 'Mileage', 'type' =>'number')
);

// $table = array(
//      array('Date', 'Sales'),
//      array('June 25', 12.25),
//      array('June 26', 8.00)
//);

for ($x = 0; $x < $count; $x++)
{
$temp = array();
$temp[] = array('v' => (string) $dateComplete[$x]);
$temp[] = array('v' => (string) $Car[$x]);
$temp[] = array('v' => (float) $TotalCost[$x]);
$temp[] = array('v' => (float) $mpgAverage[$x]);
$rows[] = array('c' => $temp);
}

$table['rows'] = $rows;

?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Description" content="Basic Gray">
<title>Gas Log</title>
<link rel="stylesheet" href="stylesheets/default.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascripts/behavior.js"></script>

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.load('visualization', '1.0', {'packages':['controls']});

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

  function drawDashboard() {
    // Everything is loaded. Assemble your dashboard...

        var table = <?php echo json_encode($table);?>;

      var data = new google.visualization.arrayToDataTable([table]);

      console.log(table);

      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var StringSlider = new google.visualization.ControlWrapper({
          'controlType': 'StringFilter',
          'containerId': 'control_div',
          'options': {
            'filterColumnLabel': 'Car'
          }
        });

        // Create a pie chart, passing some options
        var Chart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            '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(StringSlider, Chart);

        // Draw the dashboard.
        dashboard.draw(data);
  }
</script>

Answer 1

如果你提供你的整个代码（特别是4个数组引用了dateComplete，Car，TotalCost，mpgAverage），我可以帮助你，但没有它我只是猜测。

Google Chart Chart Wrapper filterColumnLabel

1 个答案: