放大Google图表后如何停止默认的字体大小 [英] How to stop font size defaulting after zooming in on a google chart

问题描述

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

I am using Google Chart API to create a time-line graph and want the strings underneath the title of the graph to continue to be at the same font size, irrespective of the graph being zoomed in or not.

问题:

放大图后，标题下的字符串(Average Event ...，line 3)默认为原始大小，如何使其放大或放大后显示这些线(，line 3)继续保持原始文本大小

After I zoom in into the graph the strings (Average Event ..., line 3) underneath the title default to the original size, how can I make it so that when zoomed in, or after zooming in these lines (Average Event ..., line 3) continue to stay in the original text size

当前输出:

缩放前:

缩放后:

理想的输出:

相关研究:

我找不到任何参考，也没有任何遇到类似问题的人.

I could not find any reference, or anyone who had a similar issue.

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>   

推荐答案

由于图表未注册缩放"事件，
我们需要使用MutationObserver
只要图表发生变化，我们都会随时知道.

since the chart does not register a "zoom" event,
we'll need to use a MutationObserver
which will let us know anytime the chart changes.

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

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

we'll create the MutationObserver during the 'ready' event.
after saving the original font size.

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

see following working snippet...

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>

这篇关于放大Google图表后如何停止默认的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！