javascript - 我如何才能在两行中显示每行不同字体大小的标题？

Question

我正在使用 Google Chart API 创建时间线图，想将图表的标题修改为两行。

问题:

我如何才能显示两个折线图标题，具有不同的字体大小。

当前输出:

理想输出:

相关研究:

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

• > Two line title in google chart api

MWE:

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

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[new Date(2021, 11, 31, 0, 0, 0), 0, ''],


	[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
	[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[new Date(2021, 11, 31, 5, 56, 41), 0, ''],

	[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
	[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[new Date(2021, 11, 31, 12, 11, 5), 0, ''],

	[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
	[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[new Date(2021, 11, 31, 15, 14, 6), 0, ''],

	[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])

var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxis

	vAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var options

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);

}   //End drawChart()

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>   

Answer 1

不知道其他答案，修改图表，
只应在图表的 '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.charts.load('current', {'packages':['corechart']})
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[new Date(2021, 11, 31, 0, 0, 0), 0, ''],


	[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
	[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[new Date(2021, 11, 31, 5, 56, 41), 0, ''],

	[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
	[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[new Date(2021, 11, 31, 12, 11, 5), 0, ''],

	[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
	[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[new Date(2021, 11, 31, 15, 14, 6), 0, ''],

	[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])

var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxis

	vAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var options

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

  // 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;
      }
    }
  });

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

编辑

对于多行，使用split方法，而不是substring。

然后更改所有匹配标签的字体大小，第一个除外。

// get label copy to change
var labelContent = options.title.split('\n');

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

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

请参阅以下工作片段...

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

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[new Date(2021, 11, 31, 0, 0, 0), 0, ''],


	[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
	[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[new Date(2021, 11, 31, 5, 56, 41), 0, ''],

	[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
	[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[new Date(2021, 11, 31, 12, 11, 5), 0, ''],

	[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
	[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[new Date(2021, 11, 31, 15, 14, 6), 0, ''],

	[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])

var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s\nLine 3\nLine 4\nLine 5',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxis

	vAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var options

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

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

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

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

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>