javascript - 放大谷歌图表后如何停止默认字体大小

Question

我正在使用 Google Chart API 创建一个时间线图，并希望图表标题下方的字符串继续使用相同的字体大小，而不管图表是否被放大。

问题:

放大图形后，标题下方的字符串(Average Event ...、line 3)默认为原始大小，我如何才能使其在放大或放大这些行(Average Event ...、line 3) 继续保持原来的文字大小

电流输出:

缩放前:



缩放后:



理想输出:



相关研究:

我找不到任何引用资料，或任何有类似问题的人。

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\nline 3',
	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

	explorer: {
		actions: ['dragToZoom', 'rightClickToReset'],
		axis: 'horizontal',
		keepInBounds: true,
		maxZoomIn: 20.0,
		},  //End explorer

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

}  //End drawChart()

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

Answer 1

由于图表没有注册“缩放”事件，
我们需要使用 MutationObserver这将让我们随时了解图表的变化。

// listen for changes to the chart
var observer = new MutationObserver(setTitle);
observer.observe(chart.getContainer(), {
  childList: true,
  subtree: true
});

我们将创建 MutationObserver期间 'ready'事件。
保存原始字体大小后。

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

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',
  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

  explorer: {
    actions: ['dragToZoom', 'rightClickToReset'],
    axis: 'horizontal',
    keepInBounds: true,
    maxZoomIn: 20.0,
    },  //End explorer

  };  //End var options

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

var origFontSize;

// listen for chart events
google.visualization.events.addListener(chart, 'ready', function () {
  // save font size of chart label
  var labels = chart.getContainer().getElementsByTagName('text');
  origFontSize = parseInt(labels[0].getAttribute('font-size')) - 4;
  setTitle();

  // listen for changes to the chart
  var observer = new MutationObserver(setTitle);
  observer.observe(chart.getContainer(), {
    childList: true,
    subtree: true
  });
});

function setTitle() {
  // 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
        labels[i].setAttribute('font-size', origFontSize);
        break;
      }
    }
  }
}

chart.draw(data, options);

}  //End drawChart()

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