【发布时间】：2017-04-20 18:29:19
【问题描述】：
Google 图表在 bootstrap 手风琴中未占据全宽
我知道@asgallant 之前已经回答了这个问题的一个版本。但是，我无法使该答案适应这里的工作。
我需要帮助 1/ 让第二个手风琴显示图表的全宽 - 还没有找到工作解决方案 和 2/ 如何根据值用不同的颜色给条上色。我知道这已经发布过，但没有使用谷歌表格作为数据源。
提前致谢 哈特穆特
网页在这里 https://www.hartgoods.com/main/my-symptom-tracker/barchart-accordian.html
代码在这里
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapse</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in ">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br> <br>
<!--START CHART -->
<!--First Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--Only load the above ONCE per page-->
<script type="text/javascript">
// Load the Visualization API and the corechart package.
//include extra packages that or not included in the corechart package
// corechart package includes (bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter)
google.charts.load('current', {packages: ['corechart', 'annotationchart', 'table']});
// Set a callback to run when the Google Visualization API is loaded
google.charts.setOnLoadCallback(drawChart);
/*
The syntax of the query language is composed of the following clauses.
The order of the clauses must be as follows:
select Selects which columns to return, and in what order. If omitted, all of the table's columns are returned, in their default order.
where Returns only rows that match a condition. If omitted, all rows are returned.
group by Aggregates values across rows.
pivot Transforms distinct values in columns into new columns.
order by Sorts rows by values in columns.
limit Limits the number of returned rows.
offset Skips a given number of first rows.
label Sets column labels.
format Formats the values in certain columns using given formatting patterns.
*/
/*send the query - using the "sheet" parametre not the GID parameter
The query supports the following optional parameters:
headers=N: Specifies how many rows are header rows, where N is an integer zero or greater.
These will be excluded from the data and assigned as column labels in the data table.
If you don't specify this parameter, the spreadsheet will guess how many rows are header rows.
Note that if all your columns are string data, the spreadsheet might have difficulty determining which rows are header rows without this parameter
gid=N: Specifies which sheet in a multi-sheet document to link to, if you are not linking to the first sheet. N is the sheet's ID number.
You can learn the ID number by navigating to the published version of that sheet and looking for the gid=N parameter in the URL.
You can also use the sheet parameter instead of this parameter. Gotcha: Google Spreadsheets might rearrange the gid parameter in the URL when viewed in a browser;
if copying from a browser, be sure that all parameters are before the URL's # mark. Example: gid=1545912003.
sheet=sheet_name: Specifies which sheet in a multi-sheet document you are linking to, if you are not linking to the first sheet.
sheet_name is the display name of the sheet. Example: sheet=Sheet5.
*/
//send the query - using the "sheet" parametre - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/13ZXjNfFOf0glEzEkAg5VWXNTP3oZPaDR9WKwa0kTrds/gviz/tq?sheet=Sheet2&headers=1&tq=SELECT A, B where B > 0 and B <= 5 ORDER BY B desc limit 1000 offset 0');
query.send(handleSampleDataQueryResponse);
}
//draw the chart - - using the "sheet" parametre - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
function handleSampleDataQueryResponse(response){
// ADD some error handling - START
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// ADD some error handling - END
//get data table
var data = response.getDataTable();
//adjust chart and bar height according to how many rows
var chartAreaHeight = data.getNumberOfRows() * 30;
var chartHeight = chartAreaHeight + 400;
// Set chart options - START
var options = {
//set transparency of the chart background, whether the chart is stacked and importantly,
//the physical height, in pixels of the chart.
backgroundColor: 'transparent',
isStacked: false,
height: chartHeight,
// control colours of lines NOTE this overides automatic colouring
colors: ['orange', 'magenta',"blue"],
//control opacity of bars
dataOpacity:.85,
chartArea: {
height: chartAreaHeight,
top: "100",
right: "100",
bottom: "100",
left: "100"
},
/*An object with members to configure the placement and size of the chart area (where the chart itself is drawn,
excluding axis and legends). Two formats are supported: a number, or a number followed by %.
A simple number is a value in pixels; a number followed by % is a percentage.*/
animation:{startup:'true',duration:'3000',easing:'inAndOut'},
//makes the chart transparent so the background color shows through
// chart title
title:'MSQ Results',
titleTextStyle: {color: 'white',fontSize:30,fontName: 'arial',bold: false,italic: false},
// control position of legend
legend: { position: 'top',textStyle: {color: 'orange', fontSize: 24}},
// horizontal axis title and formating
vAxis: {
textPosition:'in',
title: 'SYMPTOMS',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'black',fontSize: 13,fontName: 'Arial',bold: false,italic: false},
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
// horizontal axis title and formating
hAxis: {
baseline:0,
baselineColor:'white',
title: 'SCORE',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'white',fontSize: 18,fontName: 'Arial',bold: false,italic: false},
minValue:0, maxValue:4,
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
};
// Set chart options - END
//draw the chart
var chart = new google.visualization.BarChart(document.getElementById('mychart'));
chart.draw(data,options );
window.addEventListener('resize', function () {
chart.draw(data, options);
}, false);
}
</script>
<div style="font-family:opensans;border: 0 none; background-color:#009688;">
<!-- div to show the chart on the web page -->
<div id="mychart" ></div>
</div>
<!--END CHART -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br> <br> Chart 2
<!--START CHART -->
<!--First Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--Only load the above ONCE per page-->
<script type="text/javascript">
// Load the Visualization API and the corechart package.
//include extra packages that or not included in the corechart package
// corechart package includes (bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram, scatter)
google.charts.load('current', {packages: ['corechart', 'annotationchart', 'table']});
// Set a callback to run when the Google Visualization API is loaded
google.charts.setOnLoadCallback(drawChart);
/*
The syntax of the query language is composed of the following clauses.
The order of the clauses must be as follows:
select Selects which columns to return, and in what order. If omitted, all of the table's columns are returned, in their default order.
where Returns only rows that match a condition. If omitted, all rows are returned.
group by Aggregates values across rows.
pivot Transforms distinct values in columns into new columns.
order by Sorts rows by values in columns.
limit Limits the number of returned rows.
offset Skips a given number of first rows.
label Sets column labels.
format Formats the values in certain columns using given formatting patterns.
*/
/*send the query - using the "sheet" parametre not the GID parameter
The query supports the following optional parameters:
headers=N: Specifies how many rows are header rows, where N is an integer zero or greater.
These will be excluded from the data and assigned as column labels in the data table.
If you don't specify this parameter, the spreadsheet will guess how many rows are header rows.
Note that if all your columns are string data, the spreadsheet might have difficulty determining which rows are header rows without this parameter
gid=N: Specifies which sheet in a multi-sheet document to link to, if you are not linking to the first sheet. N is the sheet's ID number.
You can learn the ID number by navigating to the published version of that sheet and looking for the gid=N parameter in the URL.
You can also use the sheet parameter instead of this parameter. Gotcha: Google Spreadsheets might rearrange the gid parameter in the URL when viewed in a browser;
if copying from a browser, be sure that all parameters are before the URL's # mark. Example: gid=1545912003.
sheet=sheet_name: Specifies which sheet in a multi-sheet document you are linking to, if you are not linking to the first sheet.
sheet_name is the display name of the sheet. Example: sheet=Sheet5.
*/
//send the query - using the "sheet" parametre - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/13ZXjNfFOf0glEzEkAg5VWXNTP3oZPaDR9WKwa0kTrds/gviz/tq?sheet=Sheet2&headers=1&tq=SELECT A, B where B > 0 and B <= 5 ORDER BY B desc limit 1000 offset 0');
query.send(handleSampleDataQuery2Response); //have to change this to handleSampleDataQuery2Response when have more than one chart on the page
}
//draw the chart - - using the "sheet" parameter - handleSampleDataQueryResponse) not the GID parameter - (handleQueryResponse)
//have to change this to handleSampleDataQuery2Response(response) when have more than one chart on the page
function handleSampleDataQuery2Response(response){
// ADD some error handling - START
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// ADD some error handling - END
//get data table
var data = response.getDataTable();
//adjust chart and bar height according to how many rows
var chartAreaHeight = data.getNumberOfRows() * 30;
var chartHeight = chartAreaHeight + 400;
// Set chart options - START
var options = {
//set transparency of the chart background, whether the chart is stacked and importantly,
//the physical height, in pixels of the chart.
backgroundColor: 'transparent',
isStacked: false,
height: chartHeight,
// control colours of lines NOTE this overides automatic colouring
colors: ['orange', 'magenta',"blue"],
//control opacity of bars
dataOpacity:.85,
chartArea: {
height: chartAreaHeight,
top: "100",
right: "100",
bottom: "100",
left: "100"
},
/*An object with members to configure the placement and size of the chart area (where the chart itself is drawn,
excluding axis and legends). Two formats are supported: a number, or a number followed by %.
A simple number is a value in pixels; a number followed by % is a percentage.*/
animation:{startup:'true',duration:'3000',easing:'inAndOut'},
//makes the chart transparent so the background color shows through
// chart title
title:'MSQ Results',
titleTextStyle: {color: 'white',fontSize:30,fontName: 'arial',bold: false,italic: false},
// control position of legend
legend: { position: 'top',textStyle: {color: 'orange', fontSize: 24}},
// horizontal axis title and formating
vAxis: {
textPosition:'in',
title: 'SYMPTOMS',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'black',fontSize: 13,fontName: 'Arial',bold: false,italic: false},
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
// horizontal axis title and formating
hAxis: {
baseline:0,
baselineColor:'white',
title: 'SCORE',
titleTextStyle: {color: 'white',fontSize: 24,fontName: 'Arial',bold: false,italic: false},
textStyle: {color: 'white',fontSize: 18,fontName: 'Arial',bold: false,italic: false},
minValue:0, maxValue:4,
gridlines: {color: 'white', count: 5, units:''},
minorGridlines: {color: 'green', count:0 , units:''} },
};
// Set chart options - END
//draw the chart
var chart = new google.visualization.BarChart(document.getElementById('mychart2')); //have to change this to mychart2 when have more than one chart on the page
chart.draw(data,options );
window.addEventListener('resize', function () {
chart.draw(data, options);
}, false);
}
</script>
<div style="font-family:opensans;border: 0 none; background-color:#009688;">
<!-- div to show the chart on the web page -->
<div id="mychart2" ></div> <!--have to change this to mychart2 when have more than one chart on the page-->
</div>
<!--END CHART -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
需要等到图表的容器可见，然后再绘制图表——同样，
google.charts.load和setOnLoadCallback应该在每次页面加载时只使用一次... -
感谢 WhiteHat - 关于“需要等到图表的容器可见，然后再绘制图表”的任何提示，我可以在我的项目中实现这一点
标签： javascript google-visualization