如何为Google Charts Combo Chart标题设置CSS式灵活字体大小？

Google Charts Combo Chart的titleTextStyle.fontSize确实只支持像素值，没法直接用vw、%这类相对单位。但可以通过DOM操作+图表就绪事件来实现需求，具体步骤如下：

实现思路 #

Combo Chart没有类似Table Chart的cssClassNames选项，所以只能等图表绘制完成后，直接找到标题元素修改其CSS样式，从而使用任意CSS支持的单位。

代码示例 #

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

function drawChart() {
  // 构造示例数据
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    title: 'Company Performance',
    titleTextStyle: {
      fontSize: 16 // 先设基础像素值，后续会被覆盖
    },
    seriesType: 'bars',
    series: {2: {type: 'line'}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  // 监听图表就绪事件，确保DOM元素已生成
  google.visualization.events.addListener(chart, 'ready', function() {
    // 定位标题元素：Google Charts默认给标题添加google-visualization-title类
    var chartTitle = document.querySelector('#chart_div .google-visualization-title');
    if (chartTitle) {
      // 使用vw单位适配不同屏幕，也可替换成%、rem等
      chartTitle.style.fontSize = '2vw';
      // 可选：补充其他样式，比如字体权重、颜色
      // chartTitle.style.fontWeight = 'bold';
    }
  });

  chart.draw(data, options);
}

关键说明 #

1. 就绪事件的必要性：必须在ready事件中执行样式修改，否则图表还没绘制完成，标题元素还未出现在DOM中，无法选中。
2. 元素选择器：默认标题元素会带有google-visualization-title类，结合图表容器的ID即可精准定位。如果有副标题，可通过浏览器开发者工具查看元素结构调整选择器。
3. 单位灵活性：可以根据需求替换成任意CSS单位，比如1.5rem（基于根字体大小）、120%（相对于父元素）、3vh（视口高度的3%）等，完美适配从移动设备到4K屏幕的缩放需求。
4. 重绘场景处理：如果图表会因数据更新重新绘制，需要确保每次绘制后都执行样式修改逻辑，可将修改逻辑封装成独立函数，在ready事件和重绘后调用。

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