Javascript 我怎样才能在两行中显示标题，每行的字体大小不同？

我正在使用GoogleChartAPI创建一个时间线图，并希望将该图的标题修改为两行

问题：

我将如何显示两行图表标题，不同的字体大小

电流输出：

理想输出：

相关研究：

我唯一能找到的就是有人试图用饼图来做这件事，但我试了，但没能成功

MWE:

google.charts.load（'current'，{'packages'：['corechart']}）
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date\&Time'）；
data.addColumn（“数字”，“触发事件”）；
addColumn（{type:'string'，role:'tooltip'}）；
data.addRows([
[新日期（2021、11、31、0、0、0）、0、，]，
[新日期（2021,11,31,3,41,44），0，，]，
[新日期（2021,11,31,3,41,44），1，'事件持续时间：2h 14m 57s\n最大值：XYZ°C\n开始时间：03:41:44\n结束时间：05:56:41']，
[新日期（2021,11,31,5,56,41），1，'事件持续时间：2h 14m 57s\n最大值：XYZ°C\n开始时间：03:41:44\n结束时间：05:56:41']，
[新日期（2021,11,31,5,56,41），0，，]，
[新日期（2021,11,31,9,40,48），0，，]，
[新日期（2021,11,31,9,40,48），1，'事件持续时间：2h 30m 17s\n最大值：XYZ°C\n开始时间：09:40:48\n结束时间：12:11:05']，
[新日期（2021,11,31,12,11,5），1，'事件持续时间：2h 30m 17s\n最大值：XYZ°C\n开始时间：09:40:48\n结束时间：12:11:05']，
[新日期（2021,11,31,12,11,5），0，，]，
[新日期（2021,11,31,12,45,57），0，，]，
[新日期（2021,11,31,12,45,57），1，'事件持续时间：2h 28m 9s\n最大值：XYZ°C\n开始时间：12:45:57\n结束时间：15:14:06']，
[新日期（2021,11,31,15,14,6），1，'事件持续时间：2h 28m 9s\n最大值：XYZ°C\n开始时间：12:45:57\n结束时间：15:14:06']，
[新日期（2021,11,31,15,14,6），0，，]，
[新日期（2022,0,1,0,0,0），0，']
])；//结束数据。添加行（[]））
变量选项={
标题：“生成的3个事件\n平均事件持续时间：2h 24m 27s”，
工具提示：{textStyle:{fontName:'Lucida Console'，fontSize:12}，
宽度：1100，
身高：500，
线宽：1，
图表区域：{宽度：900，高度：150}，
系列：{0:{color:'#188785'，区域不透明度：1.0}，
图例：{位置：'无'}，
使能互动性：正确，
哈克斯：{
标题：“日期\时间”，
titleTextStyle:{粗体：假，斜体：假}，
格式：“dd/MM/yyyy HH:MM”，
是的，
倾斜角度：90，
网格线：{color:'none'}，
}，//结束hAxis
言辞：{
标题：“触发的事件”，
titleTextStyle:{粗体：假，斜体：假}，
视图窗口：{min:0，max:1}，
记号：[{v:0，f:'Event Off'}，{v:1，f:'Event On'}]，
网格线：{color:'透明'}
}，//结束语
}；//结束变量选项
var chart=new google.visualization.AreaChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}//结束drawChart（）

---

在不知道其他答案的情况下，对图表进行修改，
只能在图表的

'ready'

事件中进行。
否则，在尝试修改时，元素可能还不存在

在此，我们确定要更改的标签的文本内容。
查找包含内容的标签，
然后减小元素的字体大小

// listen for chart ready event
google.visualization.events.addListener(chart, 'ready', function () {
  // get label copy to change
  var labelContent = options.title.substring(options.title.indexOf('\n') + 1);

  // get chart labels
  var labels = chart.getContainer().getElementsByTagName('text');

  // find chart label
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].textContent === labelContent) {
      // reduce font size
      var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
      labels[i].setAttribute('font-size', currentFontSize - 4);
      break;
    }
  }
});

//侦听图表就绪事件
google.visualization.events.addListener（图表'ready'，函数（）{
//获取要更改的标签副本
var labelContent=options.title.substring（options.title.indexOf（'\n'）+1）；
//获取图表标签
var labels=chart.getContainer（）.getElementsByTagName（'text'）；
//查找图表标签
对于（变量i=0；i

注意：根据图表的大小，字体大小可能会有所不同。
除非在图表选项中明确设置字体大小。
此外，必须在创建图表后分配事件侦听器，
在绘制图表之前

请参阅以下工作片段

google.charts.load（'current'，{'packages'：['corechart']}）
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date\&Time'）；
data.addColumn（“数字”，“触发事件”）；
addColumn（{type:'string'，role:'tooltip'}）；
data.addRows([
[新日期（2021、11、31、0、0、0）、0、，]，
[新日期（2021,11,31,3,41,44），0，，]，
[新日期（2021,11,31,3,41,44），1，'事件持续时间：2h 14m 57s\n最大值：XYZ°C\n开始时间：03:41:44\n结束时间：05:56:41']，
[新日期（2021,11,31,5,56,41），1，'事件持续时间：2h 14m 57s\n最大值：XYZ°C\n开始时间：03:41:44\n结束时间：05:56:41']，
[新日期（2021,11,31,5,56,41），0，，]，
[新日期（2021,11,31,9,40,48），0，，]，
[新日期（2021,11,31,9,40,48），1，'事件持续时间：2h 30m 17s\n最大值：XYZ°C\n开始时间：09:40:48\n结束时间：12:11:05']，
[新日期（2021,11,31,12,11,5），1，'事件持续时间：2h 30m 17s\n最大值：XYZ°C\n开始时间：09:40:48\n结束时间：12:11:05']，
[新日期（2021,11,31,12,11,5），0，，]，
[新日期（2021,11,31,12,45,57），0，，]，
[新日期（2021,11,31,12,45,57），1，'事件持续时间：2h 28m 9s\n最大值：XYZ°C\n开始时间：12:45:57\n结束时间：15:14:06']，
[新日期（2021,11,31,15,14,6），1，'事件持续时间：2h 28m 9s\n最大值：XYZ°C\n开始时间：12:45:57\n结束时间：15:14:06']，
[新日期（2021,11,31,15,14,6），0，，]，
[新日期（2022,0,1,0,0,0），0，']
])；//结束数据。添加行（[]））
变量选项={
标题：“生成的3个事件\n平均事件持续时间：2h 24m 27s”，
工具提示：