谷歌图表包装filterColumnLabel

Google Chart Chart Wrapper filterColumnLabel

本文关键字：filterColumnLabel 包装 谷歌      更新时间：2023-09-26

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

"一个或多个参与者未能提取"

和：

"无效列标签：汽车"

我的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>

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

相关文章：
  • 没有找到相关文章