charts - Google Charts API 面积图仅在注释中显示最大值和最小值
问题描述
我正在使用 Google Charts API 面积图来显示一个简单的 Google 电子表格:第 0 列存储日期和第 1 列值。实际上,图表默认显示注释中的所有值。但我只想在注释中显示第 1 列的最小值和最大值。
我找不到我的问题的解决方案,也许你可以帮助我的源代码。
谢谢杂志
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function initialize() {
var opts = {sendMethod: 'auto'};
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/MYSPREADSHEET', opts);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}]);
var options = {
title: '',
curveType: 'function',
legend: {position: 'none'},
lineWidth: 4,
backgroundColor: '#2E4151',
colors:['white'],
fontSize: '26',
fontName: 'Open Sans',
animation:{
"startup": true,
duration: 800,
easing: 'inAndOut',
},
hAxis: {
gridlines: {color: 'transparent', count: 4},
textStyle: {color: '#FFF'}
},
vAxis: {
gridlines: {color: 'white', count: 5},
viewWindow: {min: 87, max: 101},
textStyle: {
color: '#FFF',
fontSize: 18
},
},
trendlines: {
0: {
type: 'polynomial',
color: 'yellow',
lineWidth: 5,
opacity: 0.7,
showR2: true,
visibleInLegend: true
}
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="chart_div" style="width:100%; height:100%"></div>
</body>
</html>
解决方案
您可以使用数据表方法-->getColumnRange(columnIndex)
这将返回一个具有列的最小值和最大值的对象。
然后您可以calc
在数据视图上使用该函数
来确定该值是否与最小值或最大值匹配,
并返回注释的格式化值。如果没有
返回,请参阅以下代码段...null
var data = response.getDataTable();
var range = data.getColumnRange(1);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: function (dt, row) {
var value = dt.getValue(row, 1);
if ((value === range.min) || (value === range.max)) {
return dt.getFormattedValue(row, 1);
}
return null;
}
}]);
推荐阅读
- bash - Bash:找到某个分区所在的磁盘并将结果放入变量中
- pycharm - PyCharm 在文档字符串中是否支持 Markdown?
- python - 使用 Openpyxl 保存启用宏的 Excel 工作簿 (.xlsm) 时出现问题。Excel 引发错误并开始修复工作簿
- cakephp - 翻译不起作用 帮助 请帮助 Cake Php
- c++ - 如何找到与给定数字最接近的数字
- python - xero_python 创建时间表
- swiftui - 在 SwiftUI 的模式表上重命名“取消”
- python - 如何构建使用 django 和 ebay python sdk 的项目?
- python - 在 Python 中将字典转换为 JSON
- r - R CMD SHLIB 编译 Fortran 代码时出错