如何将Google柱状图的主标题居中显示？

Google Charts的CoreChart套件确实没有直接设置外部标题居中的配置项，你可以通过以下两种方法实现需求：

方法一：自定义HTML标题（推荐，灵活可控） #

直接移除配置中的title选项，在图表容器上方添加独立的HTML标题元素，用CSS实现居中：

修改后的完整代码 #

<meta charset="UTF-8">
<title>Google Charts</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<style type="text/css">
#my_chart {
    max-width: 900px;
    height: 500px;
    border: 1px solid #ccc;     
}
.chart-title {
    text-align: center;
    color: red;
    font-size: 18px;
    font-weight: normal;
    margin: 10px 0;
}
</style>

<div class="chart-title">Students Marks</div>
<div id="my_chart"></div>

<script type="text/javascript">
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart()
{
    var my_chart = document.getElementById("my_chart");

    var data = google.visualization.arrayToDataTable([
        ['Name', 'Marks'],
        ['Sachin', 85],
        ['Amit', 60],
        ['Rohit', 75],
        ['Deepak', 50],
        ['Rahul', 55]
    ]);

    var options = {
        // 移除原title配置
        titleTextStyle: {
            color: "red",
            fontSize: 18,
            bold: false,
        }
    };

    var chart = new google.visualization.ColumnChart(my_chart);
    chart.draw(data, options);
}
</script>

方法二：通过API配置调整（纯图表内实现） #

利用titlePosition: 'in'将标题移入图表区域，再通过titleTextStyle.alignment设置居中，同时调整chartArea参数给标题留出空间：

修改后的配置部分 #

var options = {
    title: "Students Marks",
    titlePosition: 'in', // 将标题移入图表区域内
    titleTextStyle: {
        color: "red",
        fontSize: 18,
        bold: false,
        alignment: 'center' // 标题居中对齐
    },
    chartArea: {
        top: 40, // 给顶部标题留出足够空间
        width: '85%', // 调整图表区域宽度，避免标题被截断
        height: '75%'
    }
};

这种方式的标题会显示在图表画布内部，如果你需要标题在图表外部，方法一的自定义HTML标题会更合适。

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