PHP集成Google Charts：如何在横轴显示tea、milk、pepsi列名

数据库表包含tea、milk、pepsi三列且已填入数值，集成Google Charts后图表功能正常，但需要将这三个列名显示在柱状图横轴的对应柱子下方（参考截图）。

当前使用的代码 #

前端JavaScript代码

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(column_chart);

function column_chart() {
    var res = $.ajax({
    url: 'chart.php',
    dataType:"json",
    async: false,
    success: function(res)
    {
      var options = {'title':'Foods Items', 'width':800, 'height':400,
      series: {
                0: { color: 'purple' },
                1: { color: 'navy' },
              }
    };
    
    var data = new google.visualization.arrayToDataTable(res);
    var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_data'));
    chart.draw(data, options);
    
    }
    }).responseText;
 }

PHP后端代码

include('db.php');

$data[] = array('Foods Items', 'Tea','Milk', 'Pepsi');   

$res = $db->prepare('SELECT 
tea AS value_tea,
milk AS value_milk,
pepsi AS value_pepsi FROM foods');
$res->execute(array());

while($row = $res->fetch()) {   
  $tea = $row['value_tea'];
  $milk = $row['value_milk'];
  $pepsi = $row['value_pepsi'];
  $fd= 'Provisions';
  $data[] = array($fd,(int)$tea,(int)$milk,(int)$pepsi);
}
  
echo json_encode($data);

解决方案 #

当前代码的核心问题是数据结构不符合需求：你把Tea、Milk、Pepsi定义为图表的「系列」（每个系列对应一组柱子），而横轴显示的是Foods Items的取值（也就是Provisions）。要让横轴显示这三个列名，需要把它们改成横轴的分类项，每个分类对应一个数值。

修改后的PHP代码

include('db.php');

// 调整数据结构：第一行定义列名，后续每行是一个分类和对应数值
$data[] = array('Item', 'Value');   

$res = $db->prepare('SELECT tea, milk, pepsi FROM foods');
$res->execute(array());
$row = $res->fetch(); // 假设数据库只有一行数据

// 将三个列转为横轴分类项
$data[] = array('Tea', (int)$row['tea']);
$data[] = array('Milk', (int)$row['milk']);
$data[] = array('Pepsi', (int)$row['pepsi']);
  
echo json_encode($data);

修改后的JavaScript代码

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(column_chart);

function column_chart() {
    $.ajax({
        url: 'chart.php',
        dataType:"json",
        async: true, // 改为异步请求，避免阻塞页面
        success: function(res) {
            var options = {
                title:'Foods Items', 
                width:800, 
                height:400,
                colors: ['purple', 'navy', '#ff9900'], // 为每个柱子设置对应颜色
                hAxis: {
                    title: '食品项', // 可选：给横轴添加标题
                    textStyle: {
                        fontSize: 12
                    }
                }
            };
            
            var data = new google.visualization.arrayToDataTable(res);
            var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_data'));
            chart.draw(data, options);
        }
    });
 }

说明 #

• 修改后的数据结构把Tea、Milk、Pepsi作为横轴的分类标签，每个标签对应一个柱子和数值
• 将同步请求改为异步，避免阻塞页面渲染
• 通过colors数组可以分别设置每个柱子的颜色，匹配需求中的视觉样式

内容的提问来源于stack exchange，提问作者Nancy Moore