Google 中的 Y 轴图表在 "General 1, General 2" 中递增等 - Java 脚本
Y Axis in Google Charts increments in "General 1, General 2" etc - Java Script
我在 Google 图表中的仪表板有问题。目前一切正常,除了柱形图在 Y 轴上显示字符串而不是整数。
我发现 Google 图表页面上的文档很难理解,所以如果我的代码中有错误,或者如果有更简单的方法我可以做到这一点,我深表歉意。
我的 JS Fiddle 如下所示:https://jsfiddle.net/hm7q5peg/6/
google.load('visualization', '1.0', {
'packages': ['corechart','table', 'controls']
});
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// Using the jsapi, it's better to set the url
// for the spreadsheet, then use setQuery() to
// define the query that will provide your data.
var url = '//docs.google.com/spreadsheet/ccc?key=1FOVmfesx7ATNe8qjWjkU2GbjBCBZxL0BRswJv6rcGPs&usp=drive_web&gid=1324373577';
var query = new google.visualization.Query(url);
query.setQuery('select B,C where B <> ""');
// Send the query with a callback function
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
// Called when the query response is returned.
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Number Attended'
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
//define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
'width':'300px'
}
});
//define the column chart
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId' : 'column_div',
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, [pieChart, table, columnChart]);
// Draw the dashboard.
dashboard.draw(data);
}
如果您还没有这样做,请查看 ColumnChart Configuration Options to see what you have to play with. By specifying a numeric format for the vertical axis, you will get numbers. Unfortunately, without a bunch of additional code,gViz 将决定您必须要查看分数,即使您的数据都是整数。
//define the column chart
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'options' : {
'hAxis' : { 'title' : 'Student Name' },
'legend' : {position: 'none' },
'vAxis' : {format: 'short',
title: 'Number Attended'}
},
'containerId' : 'column_div',
});
我在 Google 图表中的仪表板有问题。目前一切正常,除了柱形图在 Y 轴上显示字符串而不是整数。
我发现 Google 图表页面上的文档很难理解,所以如果我的代码中有错误,或者如果有更简单的方法我可以做到这一点,我深表歉意。
我的 JS Fiddle 如下所示:https://jsfiddle.net/hm7q5peg/6/
google.load('visualization', '1.0', {
'packages': ['corechart','table', 'controls']
});
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// Using the jsapi, it's better to set the url
// for the spreadsheet, then use setQuery() to
// define the query that will provide your data.
var url = '//docs.google.com/spreadsheet/ccc?key=1FOVmfesx7ATNe8qjWjkU2GbjBCBZxL0BRswJv6rcGPs&usp=drive_web&gid=1324373577';
var query = new google.visualization.Query(url);
query.setQuery('select B,C where B <> ""');
// Send the query with a callback function
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
// Called when the query response is returned.
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Number Attended'
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
//define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
'width':'300px'
}
});
//define the column chart
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId' : 'column_div',
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, [pieChart, table, columnChart]);
// Draw the dashboard.
dashboard.draw(data);
}
如果您还没有这样做,请查看 ColumnChart Configuration Options to see what you have to play with. By specifying a numeric format for the vertical axis, you will get numbers. Unfortunately, without a bunch of additional code,gViz 将决定您必须要查看分数,即使您的数据都是整数。
//define the column chart
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'options' : {
'hAxis' : { 'title' : 'Student Name' },
'legend' : {position: 'none' },
'vAxis' : {format: 'short',
title: 'Number Attended'}
},
'containerId' : 'column_div',
});