前端之家

  1. 首页
  2. 问答

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

• 问答

我正在使用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),''],[new Date(2021,3,41,44),1,'Event Duration: 2h 14m 57s\nmax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],5,56,41),9,40,48),'Event Duration: 2h 30m 17s\nmax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],12,5),45,57),'Event Duration: 2h 28m 9s\nmax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],15,14,6),[new Date(2022,'']
]);   //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',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>

xx328397830 回答：如何在两行中以每行不同的字体大小显示标题？

其他答案未知，对图表的修改，
应该仅在图表的'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),''],[new Date(2021,3,41,44),1,'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],5,56,41),9,40,48),'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],12,5),45,57),'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],15,14,6),[new Date(2022,'']
]);   //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',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,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','']
]);   //End data.addRows([])

var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s\nLine 3\nLine 4\nLine 5',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>

chartsgoogle-visualizationgraphhtmljavascript
本文链接：https://www.f2er.com/3098176.html

大家都在问