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

Question

我正在使用 Google 图表 API 创建一个 time-line 图表，想将图表的标题修改为两行。

问题：

我怎样才能用不同的字体大小显示两个折线图标题。

当前输出：

理想输出：

相关研究：

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

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>

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

How would I be able display the title in two lines with a different font size for each line?

html

javascript

charts

graph

google-visualization