Question

我正在制作Google图表条形图！数据来自MySQL，使用JSON和PHP。我想要的是将标签放在条形图的末尾。由于数据是动态的，我发现很难。

<?php
   $sth = mysql_query("select * from table");
   $rows = array();
   //flag is not needed
   $flag = true;
   $table = array();
   $table['cols'] = array(
                    array('label' => 'Stats', 'type' => 'string'),
                    array('label' => 'Value', 'type' => 'number')
                    );
   $rows = array();
   while($r = mysql_fetch_assoc($sth)) 
   {
    $temp = array();
    $temp[] = array('v' => (string) $r['Stats']); 
    $temp[] = array('v' => (int) $r['Value']); 
    $rows[] = array('c' => $temp);
   }
    $table['rows'] = $rows;
    $jsonTable = json_encode($table);
?>  
<script type="text/javascript">
   google.load('visualization', '1', {'packages':['corechart']});
   google.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
      var options = {
            legend: {position: 'none'},
        bar: {groupWidth: "85%"},
        colors:['#4A9218'],
        hAxis: {
                    viewWindowMode: 'explicit',
                    viewWindow: {
                                 max: 400,
                                 min: 0,
                                 },
                     gridlines: {
                              count: 10,
                                }
                            }          
   };
   var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
   chart.draw(data, options);
 }
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div" style="width:100%; height:200px"></div>

结果：条形图没有标签结果我正在寻找：带有标签的条形图在右边

Answer 1

首先，将JSON_NUMERIC_CHECK添加到json_encode调用，因为MySQL将数字输出为字符串，输入数字作为字符串可能会导致某些图表出现问题：

$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);

如果要在条形图上添加数据值作为注释，最简单的方法是创建一个DataView，其中包含一个计算的'annotation'角色列，该列从值列中获取数据并将其字符串化：

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    type: 'string',
    role: 'annotation',
    sourceColumn: 1,
    calc: 'stringify'
}]);

然后使用视图绘制图表而不是DataTable：

chart.draw(view, options);

谷歌条形图标签动态数据。如何添加标签？

1 个答案: