2014-04-13 53 views
0

我已经成功地制作了基于来自mysql的值显示的谷歌条形图。现在我想让它堆叠图表使用谷歌图表api的堆积条形图

我见过很多例子,通过事实来了,这种效果是使用图表paramaeters像CHCO,CHT,冠心病等非常久远的图表API网址,即是这样产生的:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World 

我试图使用的基本方法使用MySQL,即获取从MySQL数据和JSON编码它使一个条形图,使图表和发送相同的以图表脚本,如:

图表代码:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/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 json = $.ajax({ 
      url: 'get_json_rank.php', // make this url point to the data file 
      dataType: 'json', 
      async: false 
     }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(json); 
     var options = { 
      legend: { position: 'none' }, 
      is3D: 'true', 
      width: 500, 
      height: 320, 
      colors:['#4D515D'], 
      hAxis: { 
       textPosition:'none', 
       title: "Restaurants"}, 
      vAxis: { 
       title: "Business Growth", 
       } 
     }; 
     // Instantiate and draw our chart, passing in some options. 
     //do not forget to check ur div ID 
     var chart = new google.visualization.BarChart(document.getElementById('rank_chart')); 
     chart.draw(data, options); 

     setInterval(drawChart, 500); 
    } 
</script> 

我要添加其中PHP变量必须包含,因为它们代表在酒吧中的男女比例图表中的下列参数:

 cht='bhs', 
     chco='4D89F9','C6D9FD' 
     chd='t:'+ <?php echo $a; ?> +'|'+ <?php echo $b;?>, 
     chds='0,160' 

现在有人可以让我知道如何将这个简单的条形图变成堆叠。任何帮助,不胜感激。

回答

1

您开始使用选项堆积条形图:

isStacked: true 

is3D: 'true'是用于饼图选项。

选项chco, cht, chd...适用于不推荐使用的图像图表。看到谷歌Image charts

+0

是的,我已经看到它......但总得感谢 – Divyang