在Google Charts中將setColumns（）與JSON表一起使用

Question

Google Charts API中是否有類似於setColumns（）的函數可用於JSON數據？

我試圖通過將數據組合到一個數組中，然后向Google圖表指定要使用的列，來最大程度地減少PHP調用。

使用下面的代碼，我得到該函數不存在的錯誤：

var data = new google.visualization.DataTable(jsonData);
data.setColumns([0,1,2]);

編輯：

這是每個文件的相關部分。

Javascript文件：

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

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

function drawChart() {
    var jsonData = $.ajax({
      url: "getData.php",
      dataType:"json",
      async: false
      }).responseText;

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

data.setColumns([0,1,2]);

var options = {
    width: chartWidth,
    height: chartHeight,
    backgroundColor: '#FFFFFF',
    legend:{
        textStyle:{color:'black'}
    },

    hAxis: {
      title: 'Time (EST)',
      baselineColor: 'black',
      textStyle:{color:'black',fontSize:'9'},
      slantedText: true,
      slantedTextAngle:45,
      titleTextStyle:{color:'black'}
    },

    vAxis: {
      title: 'Temperature(F)',
      baselineColor: 'black',
      textStyle:{color:'black'},
      titleTextStyle:{color:'black'}
    },

    colors: ['#FF0000', '#005F00']

  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.LineChart(document.getElementById('Tchart_div'));
  chart.draw(data, options);

相關的PHP代碼：

// Build an array thats Google Charts Readable ... ... ...
$table=array();
$table['cols'] = array(
    // Chart Labels (i.e. column headers)
    array('label' => 'dateTime', 'type' => 'string'),
    array('label' => 'Temp', 'type' => 'number'),
    array('label' => 'Dew', 'type' => 'number'),
    array('label' => 'Heat Index', 'type' => 'number'),
    array('label' => 'Wind Chill', 'type' => 'number'),
    array('label' => 'Pressure', 'type' => 'number'),
    array('label' => 'Radiation', 'type' => 'number'),
    array('label' => 'UV Index', 'type' => 'number'),
    array('label' => 'WindSpeed', 'type' => 'number'),
    array('label' => 'WindGustSpeed', 'type' => 'number')   
);

$rows = array();

while($r = mysql_fetch_assoc($query))
{
    $mdat = $r['dateTime'];
    if ( ($mdat % 900) == 0) // If it's within our interval, save the data
    {
        // Date/Time
        $tdat = new DateTime("@$mdat");
        $tdat->setTimeZone(new DateTimeZone('America/New_York'));
        $rdat = $tdat->format('H:i');

        //Temp/Dew
        $Tdat = $r['outTemp'];
        $Tdat = number_format($Tdat, 2, '.', '');
        $Ddat = $r['dewpoint'];
        $Ddat = number_format($Ddat, 2, '.', '');

        //Heat Index/Wind Chill
        $HIdat = $r['heatindex'];
        $HIdat = number_format($pdat, 2, '.', '');
        $WCdat = $r['windchill'];
        $WCdat = number_format($wdat, 2, '.', '');

        //Pressure
        $Pdat = $r['barometer'];
        if ($Pdat == 0)
        {
            $Pdat = 29.92;
        }
        $Pdat = $Pdat * 33.8637526;
        $Pdat = number_format($Pdat, 2, '.', '');

        //Solar
        $RADdat = $r['radiation'];
        $RADdat = number_format($RADdat, 2, '.', '');
        $Udat = $r['UV'];

        //Wind
        $Wdat = $r['windSpeed'];
        $Wdat = number_format($Wdat, 2, '.', '');
        $Gdat = $r['windGust'];

        // Now save everything in an array...
        $temp = array();
        $temp[] = array('v' => (string) $rdat);  //Time
        $temp[] = array('v' => (float) $Tdat);   //Temp
        $temp[] = array('v' => (float) $Ddat);   //Dewp
        $temp[] = array('v' => (float) $HIdat);  //Heat Index
        $temp[] = array('v' => (float) $WCdat);  //Wind Chill
        $temp[] = array('v' => (float) $Pdat);   //Pressure
        $temp[] = array('v' => (float) $RADdat); //Solar Radiation
        $temp[] = array('v' => (float) $Udat);   //UV Index
        $temp[] = array('v' => (float) $Wdat);   //Wind Speed
        $temp[] = array('v' => (float) $Gdat);   //Wind Gusts


        // Make the previous array a row in this new array
        $rows[] = array('c' => $temp);
    }
}

$table['rows'] = $rows; // Build a table out of the rows array
$jsonTable = json_encode($table); //encode the table into the json format

簡而言之，我想告訴Charts API僅從JSON表中選擇某些字段

Answer 1

代替data.setColumns([0,1,2]); 您應該使用setView 。

data.setView({columns:[0,1,2]});

Answer 2

您可能正在尋找DataView Class setColumns函數 。 在這種情況下，以下示例演示了如何在Google圖表中設置可見列：

 google.load("visualization", "1.1", { packages: ["table"] }); google.setOnLoadCallback(drawTable); function drawTable() { getWeatherData(function (data) { var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, { showRowNumber: true, width: '100%', height: '100%' }); }); } function getWeatherData(complete) { $.getJSON('https://gist.githubusercontent.com/vgrem/2d1436388ae8872f149d/raw/7193623c50cf2e093989391182aa67aaf8fdad2b/WeatherData.json', function (json) { var dataTable = new google.visualization.DataTable(json); var dataView = new google.visualization.DataView(dataTable); dataView.setColumns([0,1,2]); complete(dataView); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="table_div"></div> 

WeatherData.json