如何在两行中以每行不同的字体大小显示标题?

3kstc

我正在使用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>   

白帽

另一个答案不为人知,对图表的修改
只能在发生图表'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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在drawString Java中更改字体大小

来自分类Dev

如何在phpStorm 8中更改字体大小的代码?

来自分类Dev

如何在WPF用户控件的两个不同控件中更改字体大小?

来自分类Dev

如何在两行中显示列表?

来自分类Dev

如何在单个<p>中垂直对齐2种不同的字体大小

来自分类Dev

如何在javafx中更改文本字体大小?

来自分类Dev

如何在PHPexcel的标题中设置字体大小?

来自分类Dev

如何在summernote中设置字体大小?

来自分类Dev

如何在引导程序中设置字体大小以显示恒定视图?

来自分类Dev

如何在matplotlib-venn中修改字体大小

来自分类Dev

如何在地图标题iOS Xamarin(C#)中更改字体大小

来自分类Dev

具有不同字体大小,字体等的多行ggplot标题

来自分类Dev

如何在TabControl中更改标签标题的字体大小?

来自分类Dev

如何在gnuplot-py中设置图形标题的字体大小?

来自分类Dev

如何在emacs中更改字体大小?

来自分类Dev

如何快速向textview文本中添加两种不同的字体大小

来自分类Dev

Bootstrap按钮,文本分布在两行中,每行的字体大小不同

来自分类Dev

如何在AngularJS中每行重复两行

来自分类Dev

如何在单个<p>中垂直对齐2种不同的字体大小

来自分类Dev

JFreeChart标题中的不同字体或字体大小

来自分类Dev

如何在不使用表格的情况下显示标题和数据的两行?

来自分类Dev

如何使用Unsemantic使两种不同的字体大小坐在一行上

来自分类Dev

如何在jquery-mobile中更改选择列表标题的字体大小?

来自分类Dev

如何在highcharts的外部css文件中设置列颜色,标题颜色,字体大小,字体系列?

来自分类Dev

如何增加窗口标题的字体大小?

来自分类Dev

如何在Foundation + SASS中减小标题的字体大小?

来自分类Dev

如何在Ubuntu 18.04 LTS中为HDPI / 4K显示增加字体大小?

来自分类Dev

在Bootstrap中以不同的字体大小垂直对齐标题

来自分类Dev

如何在 UILabel 中设置字母和数字之间的不同字体大小

Related 相关文章

  1. 1

    如何在drawString Java中更改字体大小

  2. 2

    如何在phpStorm 8中更改字体大小的代码?

  3. 3

    如何在WPF用户控件的两个不同控件中更改字体大小?

  4. 4

    如何在两行中显示列表?

  5. 5

    如何在单个<p>中垂直对齐2种不同的字体大小

  6. 6

    如何在javafx中更改文本字体大小?

  7. 7

    如何在PHPexcel的标题中设置字体大小?

  8. 8

    如何在summernote中设置字体大小?

  9. 9

    如何在引导程序中设置字体大小以显示恒定视图?

  10. 10

    如何在matplotlib-venn中修改字体大小

  11. 11

    如何在地图标题iOS Xamarin(C#)中更改字体大小

  12. 12

    具有不同字体大小,字体等的多行ggplot标题

  13. 13

    如何在TabControl中更改标签标题的字体大小?

  14. 14

    如何在gnuplot-py中设置图形标题的字体大小?

  15. 15

    如何在emacs中更改字体大小?

  16. 16

    如何快速向textview文本中添加两种不同的字体大小

  17. 17

    Bootstrap按钮,文本分布在两行中,每行的字体大小不同

  18. 18

    如何在AngularJS中每行重复两行

  19. 19

    如何在单个<p>中垂直对齐2种不同的字体大小

  20. 20

    JFreeChart标题中的不同字体或字体大小

  21. 21

    如何在不使用表格的情况下显示标题和数据的两行?

  22. 22

    如何使用Unsemantic使两种不同的字体大小坐在一行上

  23. 23

    如何在jquery-mobile中更改选择列表标题的字体大小?

  24. 24

    如何在highcharts的外部css文件中设置列颜色,标题颜色,字体大小,字体系列?

  25. 25

    如何增加窗口标题的字体大小?

  26. 26

    如何在Foundation + SASS中减小标题的字体大小?

  27. 27

    如何在Ubuntu 18.04 LTS中为HDPI / 4K显示增加字体大小?

  28. 28

    在Bootstrap中以不同的字体大小垂直对齐标题

  29. 29

    如何在 UILabel 中设置字母和数字之间的不同字体大小

热门标签

归档