javascript - 放大谷歌图表后如何停止默认字体大小
问题描述
我正在使用 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>
解决方案
由于图表没有注册“缩放”事件,
我们需要使用 aMutationObserver
来让我们知道图表发生变化的任何时候。
// 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>
推荐阅读
- bluetooth - 使用AC6905A LIELI IC设计“监听模块”
- shell - 使用 shell 登录应用程序?
- python - Django 数据库在 postgreSQL 容器中不存在?
- python - XGBOOST 杀死 Jupyter Notebook 内核
- c++ - 无法使用 initializer_list 调用带有变体参数的函数
- python - 通过在 Python 中并行执行,我会获得显着的性能提升吗?
- r - gtsummary:多个连续变量作为列,然后按两个分类变量分层
- android - Android Studio IDE Convert Images to WebP 不转换
- python - 有问题的角色动画 - pygame
- javascript - 在 div 中重新加载 html