2014-08-31 54 views
0

我想在表格的一列(例如我的代碼中的切片的列)上使用樣式「text-align:center」,但我只找到了如何將其添加到Google Charts功能中。我沒有發現任何顯示如何使用Ajax和Json來做的事情。使用Json在谷歌聊天中設置列的樣式 - PHP

我打電話給Main.php中的Google Charts。

我使用Ajax從Ajax.php文件中獲取數據,使用PHP和Arrays創建Json。

Main.php

<html> 
<head> 
    <meta charset="utf-8"> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type='text/javascript' src='../../jquery-1.11.1.min.js'></script> 
    <script type='text/javascript'> 

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

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

    function drawChart() { 
     //$('#chart_div').html("<img src='carregando.gif'>"); 
    var jsonData = $.ajax({ 
     url: "ajax.php", 
     dataType:"json", 
     async: false 
     }).responseText; 
    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(jsonData); 
    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.Table(document.getElementById('chart_div')); 
    chart.draw(data, {width: 200}); 
    } 

    </script> 


</head> 
<body> 

<div id="chart_div"></div> 

</body> 
</html> 

Ajax.php

<?php 

$table = array(); 
$table['cols'] = array(
    array('label' => 'Topping', 'type' => 'string'), 
    array('label' => 'Slices', 'type' => 'number') 

); 

$rows = array(); 

$temp = array(); 
$temp[] = array('v' => 'Mushrooms'); 
$temp[] = array('v' => 3); 
$rows[] = array('c' => $temp); 

$temp = array(); 
$temp[] = array('v' => 'Onions'); 
$temp[] = array('v' => 1); 
$rows[] = array('c' => $temp); 

$table['rows'] = $rows; 

$jsontable = json_encode($table); 

echo $jsontable; 

?> 

回答

1

添加樣式要更改單元格屬性,每個單元:

$temp = array(); 
$temp[] = array('v' => 'Onions'); 
$temp[] = array('v' => 1, 'p' => array('style' => 'text-align: center')); 
$rows[] = array('c' => $temp); 
+0

謝謝你,它的工作完美!唯一缺少的是我需要添加'allowHtml':true。 – user3697768 2014-09-01 17:59:48