Google可视化-尝试格式化每个工具提示，以便按格式化程序或查询显示百分比
Google Visualization - Trying to format each tooltip to display a percentage by formatter, or query
我一直在尝试将图表的工具提示格式化为百分比，但没有成功。以下是我的项目的以下功能，减少到最低限度:
- UI由两组单选按钮和一个复选标记组成。
- 用户可以切换查看不同图表类型显示的数据源
- 从用户可以查看的7个Google Sheets中查询源。
- 用户可以通过4种图表类型查看这些数据源。
- 初始数据源由
chartWrapper()显示(chart被drawChart()调用) - 接下来的6个数据源共享一个
chartWrapper()(main被alterChart()调用)
我已经在M.C.V.E.中评论了3次失败尝试的细节，如下:
- 第一次尝试:向数据源url添加编码查询字符串。
- 第二次尝试使用
setQuery() - 第三次尝试使用
formatter对象。
欢迎使用前面提到的三种方法中的任何一种来帮助解决这个问题。我对任何我没有提到的东西都是开放的，但我可能需要更多的细节，因为我还在学习这个API。谢谢你的宝贵时间，我很感激。
(恰好]
<标题> 片段<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>MCVE - GVis Formatting Tooltips</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
*,
*:before,
*:after {
font-style: normal !important;
}
body {
position: relative;
}
form {
background-color: #333;
}
#ii {
margin-top: 80px
}
.panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#chart {
height: 70vh;
width: 96vw;
}
.group.group:after,
.chart.chart:after,
.root.root:after {
color: #333;
}
div.google-visualization-tooltip {
background-color: rgba(0, 0, 0, .6);
border-radius: 6px;
min-width: 325px;
max-height: 75px;
}
div.google-visualization-tooltip > ul > li {
display: table-cell;
margin: 0 5px;
}
div.google-visualization-tooltip > ul > li > span {
color: gold;
}
#groupOpt {
display: none;
}
#groupOpt.on {
display: block;
}
</style>
</head>
<body class='sl'>
<header class='panel'>
<!--THIS PART REMOVED-->
</form>
</header>
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
var options = {
backgroundColor: {
fill: 'transparent'
},
tooltip: {
textStyle: {
color: 'gold',
fontSize: 16,
fontName: 'Verdana'
},
trigger: 'focus',
isHtml: true
},
animation: {
startup: true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
format: '####'
},
vAxis: {
maxValue: .85,
format: '#%',
textStyle: {
fontName: 'Open Sans',
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontName: 'Arial',
fontSize: 16
}
},
legend: {
textStyle: {
color: 'white',
fontName: 'Verdana'
},
position: 'bottom'
},
crosshair: {
trigger: 'both',
orientation: 'both',
focused: {
color: 'gold',
opacity: .7
},
selected: {
color: 'cyan',
opacity: .7
}
},
pointSize: 12,
theme: 'materials',
chartArea: {
left: 100,
top: 75,
width: '90%',
height: '60%'
}
}
var dataTable;
var chart;
var data;
var main;
var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
var qArray = [THIS DATA REMOVED]
];
/* Attempt #1 - Using encoded query string with data query source url
// No Errors - QUERY_STRING = select * (# * 100)% -- Syntax is wrong, but I couldn't find any solid examples.
var qArray = [ 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743&select%20*%20(%23%20*%20100)%25','https://docs.google.com/spreadsheets/d/1EH9C-_OviFTLwC5Z30HTATZqtFnOx_JcOIDHYzF7-FY/gviz/tq?gid=1552974580&select%20*%20(%23%20*%20100)%25 ',
'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=2111420909&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1379142381&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1749299608&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=268750266&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=148086622&select%20*%20(%23%20*%20100)%25', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1474413858&select%20*%20(%23%20*%20100)%25'
];
*/ //
function drawChart() {
chart = new google.visualization.ChartWrapper();
chart.setDataSourceUrl(qArray[1]);
/* Attempt #2 - Using setQuery
// Error -- Syntax is wrong but as stated previously, I could not find a solid example.
INVALID_QUERY
Invalid query: PARSE_ERROR: Encountered "format" at line 1, column 8. Was expecting one of: "true" ... "false" ... "date" ... "timeofday" ... "datetime" ... "timestamp" ... "min" ... "max" ... "avg" ... "count" ... "sum" ... "no_values" ... "no_format" ... "is" ... "null" ... "year" ... "month" ... "day" ... "hour" ... "minute" ... "second" ... "millisecond" ... "with" ... "contains" ... "starts" ... "ends" ... "matches" ... "like" ... "now" ... "dateDiff" ... "quarter" ... "lower" ... "upper" ... "dayOfWeek" ... "toDate" ... <ID> ... <INTEGER_LITERAL> ... <DECIMAL_LITERAL> ... <STRING_LITERAL> ... <QUOTED_ID> ... "(" ... "*" ... "-" ...
*/
//chart.setQuery('select format #%');
dataTable = new google.visualization.DataTable();
/* Attempt #3 Using formatter object
// Uncaught Error: Table has no columns -- I believe the syntax is correct, just not it's location and/or specific requirements such as properly handling the data from the ResponseQuery?
formatter = new google.visualization.NumberFormat({pattern:'#%'});
formatter.format(dataTable, 1);
formatter.format(dataTable, 2);
formatter.format(dataTable, 3);
formatter.format(dataTable, 4);
formatter.format(dataTable, 5);
formatter.format(dataTable, 6);
formatter.format(dataTable, 7);
formatter.format(dataTable, 8);
formatter.format(dataTable, 9);
formatter.format(dataTable, 10);
formatter.format(dataTable, 11);
formatter.format(dataTable, 12);
formatter.format(dataTable, 13);
formatter.format(dataTable, 14);
formatter.format(dataTable, 15);
*/
chart.setChartType('LineChart');
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
function alterChart(C, Q) {
C = Number(C);
Q = Number(Q);
var URL = qArray[Q];
var VIS = cArray[C];
main = new google.visualization.ChartWrapper();
main.setDataSourceUrl(URL);
// Attempt #2
// main.setQuery('select format #%');
data = new google.visualization.DataTable();
/* Attempt #3
// Uncaught Error: Table has no columns
pattern = new google.visualization.NumberFormat({pattern:'#%'});
pattern.format(data, 1);
pattern.format(data, 2);
pattern.format(data, 3);
pattern.format(data, 4);
pattern.format(data, 5);
pattern.format(data, 6);
pattern.format(data, 7);
pattern.format(data, 8);
pattern.format(data, 9);
pattern.format(data, 10);
pattern.format(data, 11);
pattern.format(data, 12);
pattern.format(data, 13);
pattern.format(data, 14);
pattern.format(data, 15);
*/ //
main.setChartType(VIS);
main.setContainerId('chart');
main.setOptions(options);
main.draw();
}
$('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
var chartSel = $("input[name='chart']:checked").val();
var groupSel = $("input[name='group']:checked").val();
if (e.target !== e.currentTarget) {
var target = e.target.id;
var status = $(target).hasClass('on') ? true : false;
}
if (target === 'root0') {
$('#' + target).toggleClass('on');
if (status === true) {
$('#groupOpt').slideUp().removeClass('on');
return alterChart(chartSel, '1');
} else if (status === false) {
$('#groupOpt').slideDown().addClass('on');
return alterChart(chartSel, groupSel);
} else return false;
} else if (target === 'chart0' || target === 'chart1' || target === 'chart2' || target === 'chart3') {
if (status === true) {
return alterChart(chartSel, '1');
} else {
return alterChart(chartSel, groupSel);
}
} else {
if (status === true) {
return false;
} else {
return alterChart(chartSel, groupSel);
}
}
});
var group = document.getElementsByName('group');
var len = group.length;
var rad;
var i;
for (i = 0; i < len; i++) {
group[i].onclick = function() {
if (rad == this) {
this.checked = false;
rad = null;
} else {
rad = this;
}
}
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>
</html>您正在设置图表的数据源URL，并且在您有机会格式化数据之前它已经呈现了自己。解决方案是自己查询数据，格式化数据，然后将其传递到图表中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>MCVE - GVis Formatting Tooltips</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
*, *:before, *:after { font-style: normal !important; }
body { position: relative; }
form { background-color: #333; }
#ii { margin-top: 80px }
.panel { display: flex; flex-wrap:wrap; justify-content: center; align-items: center; }
#chart { height: 70vh; width: 96vw; }
.group.group:after, .chart.chart:after, .root.root:after { color: #333; }
div.google-visualization-tooltip { background-color: rgba(0,0,0,.6); border-radius: 6px; min-width: 325px; max-height: 75px;}
div.google-visualization-tooltip > ul > li { display: table-cell; margin:0 5px; }
div.google-visualization-tooltip > ul > li > span { color: gold; }
#groupOpt { display:none; }
#groupOpt.on { display:block;}
</style>
</head>
<body class='sl'>
<header class='panel'>
<form id="rootOpt" class="sgc" style="width: 20%; color: #fffff">
<input type="checkbox" name="group" id="root0" value='1' checked>
<label for="root0" class="root" id="switch0" data-value="Results">Groups</label>
</form>
<form id="chartOpt" class="sgc" style="width: 80%; color: #ffcc00">
<input type="radio" name="chart" id="chart0" value='0' checked>
<input type="radio" name="chart" id="chart1" value='1'>
<input type="radio" name="chart" id="chart2" value='2'>
<input type="radio" name="chart" id="chart3" value='3'>
<label for="chart0" class="chart" data-value="Line Chart">Line Chart</label>
<label for="chart1" class="chart" data-value="Area Chart">Area Chart</label>
<label for="chart2" class="chart" data-value="Column Chart">Column Chart</label>
<label for="chart3" class="chart" data-value="Scatter Chart">Scatter Chart</label>
</form>
<form id="groupOpt" class='sgc' style="width:100%; color: #00ffff; display:none">
<input type="radio" name="group" id="group0" data-format='4' value='2' checked>
<input type="radio" name="group" id="group1" data-format='5' value='3'>
<input type="radio" name="group" id="group2" data-format='3' value='4'>
<input type="radio" name="group" id="group3" data-format='3' value='5'>
<input type="radio" name="group" id="group4" data-format='2' value='6'>
<input type="radio" name="group" id="group5" data-format='2' value='7'>
<label for="group0" class="group" data-value="Generation">Generation</label>
<label for="group1" class="group" data-value="Religion">Religion</label>
<label for="group2" class="group" data-value="Party Affiliation">Party Affiliation</label>
<label for="group3" class="group" data-value="Political Ideology">Political Ideology</label>
<label for="group4" class="group" data-value="Race">Race</label>
<label for="group5" class="group" data-value="Gender">Gender</label>
</form>
</header>
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.setOnLoadCallback(runQuery);
google.load('visualization', '1', {
packages: ['corechart', 'table', 'geomap']
});
var options = {
backgroundColor: {
fill: 'transparent'
},
tooltip: {
textStyle: {
color: 'gold',
fontSize: 16,
fontName: 'Verdana'
},
trigger: 'focus',
isHtml: true
},
animation: {
startup: true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
format: '####'
},
vAxis: {
maxValue: .85,
format: '#%',
textStyle: {
fontName: 'Open Sans',
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontName: 'Arial',
fontSize: 16
}
},
legend: {
textStyle: {
color: 'white',
fontName: 'Verdana'
},
position: 'bottom'
},
crosshair: {
trigger: 'both',
orientation: 'both',
focused: {
color: 'gold',
opacity: .7
},
selected: {
color: 'cyan',
opacity: .7
}
},
pointSize: 12,
theme: 'materials',
chartArea: {
left: 100,
top: 75,
width: '90%',
height: '60%'
}
}
var dataTable;
var chart;
var data;
var main;
var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
var qArray = ['https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743', 'https://docs.google.com/spreadsheets/d/1EH9C-_OviFTLwC5Z30HTATZqtFnOx_JcOIDHYzF7-FY/gviz/tq?gid=1552974580',
'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=2111420909', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1379142381', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1749299608', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=268750266', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=148086622', 'https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1474413858'
];
function runQuery() {
var opts = {
sendMethod: 'auto'
};
if (!google.visualization) return;
var query = new google.visualization.Query(qArray[1], opts);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (!response) return;
if (!response.getDataTable()) return;
drawChart(response.getDataTable());
}
function drawChart(dataTable) {
console.debug(dataTable)
chart = new google.visualization.LineChart(document.getElementById('chart'));
if (dataTable && dataTable.getNumberOfColumns() > 0) {
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 0
});
formatter.format(dataTable, 1);
formatter.format(dataTable, 2);
}
chart.draw(dataTable, options);
}
function alterChart(C, Q) {
C = Number(C);
Q = Number(Q);
var URL = qArray[Q];
var VIS = cArray[C];
main = new google.visualization.ChartWrapper();
main.setDataSourceUrl(URL);
if (dataTable.getNumberOfColumns() > 0) {
//formatter = new google.visualization.NumberFormat({pattern:'#''%'''});
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 0
});
formatter.format(dataTable, 1);
formatter.format(dataTable, 2);
}
main.setChartType(VIS);
main.setContainerId('chart');
main.setOptions(options);
main.draw();
}
runQuery();
$('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
var chartSel = $("input[name='chart']:checked").val();
var groupSel = $("input[name='group']:checked").val();
if (e.target !== e.currentTarget) {
var target = e.target.id;
var status = $(target).hasClass('on') ? true : false;
}
if (target === 'root0') {
$('#' + target).toggleClass('on');
if (status === true) {
$('#groupOpt').slideUp().removeClass('on');
return alterChart(chartSel, '1');
} else if (status === false) {
$('#groupOpt').slideDown().addClass('on');
return alterChart(chartSel, groupSel);
} else return false;
} else if (target === 'chart0' || target === 'chart1' || target === 'chart2' || target === 'chart3') {
if (status === true) {
return alterChart(chartSel, '1');
} else {
return alterChart(chartSel, groupSel);
}
} else {
if (status === true) {
return false;
} else {
return alterChart(chartSel, groupSel);
}
}
});
var group = document.getElementsByName('group');
var len = group.length;
var rad;
var i;
for (i = 0; i < len; i++) {
group[i].onclick = function() {
if (rad == this) {
this.checked = false;
rad = null;
} else {
rad = this;
}
}
}
</script>
</body>
</html>我刚刚解决了我的问题，我在Google表格中格式化了实际的源代码，现在工具提示是百分比。我从来没想过这么简单。下面的数组是唯一改变的东西。每个新url都指向Google工作表中预格式化的表格:
var qArray = ['https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1104711743&range=A:T', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1552974580&range=A:C', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=2111420909&range=A:E', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1379142381&range=A:F', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1749299608&range=A:D', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=268750266&range=A:D', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=148086622&range=A:C', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1474413858&range=A:C'];相关文章：
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- 如何在谷歌可视化中组合数字和模式格式化程序
- 用于用户内容的简单代码编辑器/文本格式化程序(在Rails中）
- 使用jqGrid列格式化程序函数使ng-click工作
- Highcharts:格式化程序和点击功能don'不能使用Angular
- 如何在TiddlyWiki中制作列表格式化程序
- Highcharts xAxis将格式化程序回调数据标记为空
- Angular.js指令格式化程序只调用过一次，或者如何告诉ngModel表现得像watchCollection
- 高图表 - 是否可以为每个系列添加工具提示格式化程序
- jqGrid - 如何通过自定义格式化程序提供多个预定义的格式化程序
- 工具提示格式化程序中的间距错误
- Ruby MySQL格式化程序
- Angular Directive格式化程序/渲染器不更新
- sap.m.按钮文本格式化程序
- 城市FR格式化程序案例
- 在JQGridshowlink格式化程序中添加了动态参数
- SAPUI5 - 格式化程序功能不起作用
- 使用 jquery 替换的 Highcharts 工具提示格式化程序
- 无法输入 Django Chartit 格式化程序字段
- JQGrid:排序和自定义格式化程序
