0
Google 스프레드 시트에서 데이터를 가져 오는 Google 게이지 세트를 만들었습니다. 시트에는 두 페이지가 있으며 첫 번째 페이지는 처음에는 게이지에로드되는 값을 저장하고 두 번째 페이지는 각 게이지의 변경된 값을 제공하는 데이터를가집니다. 맨 아래에있는 버튼을 사용하여 게이지를 두 값 사이에서 앞뒤로 전환 할 수 있습니다.Google 시각화는 2 개의 차트 중 1 개만 그릴 것입니다
저는 chartWrapper 클래스와 .setDataSourceUrl 메소드를 사용하여 Google 시트에서만 게이지를 애니메이션 할 수있었습니다.
게이지 아래에 데이터 테이블을 추가하고 싶지만 두 차트 래퍼를 동시에 그릴 수는 없습니다. 둘 중 하나를 그릴 수는 있지만 비슷한 문제가있는 다른 사람을 찾아 보았습니다. 설명 된 수정을 시도했지만 아무 소용이 없습니다. 고유 한 ID가 있습니다. 각 차트마다 div가 있습니다. 그런 다음 각 차트를 개별적으로 그리는 개별 함수를 호출하는 단일 함수를 호출합니다. 나는 그 밖의 무엇을 시도해야하는지에 관해 명확히하지 않고있다. 그리고 그것은이 점에서 추측 일과 매우 같다고 느낀다. 어떤 도움이라도 대단히 감사하겠습니다. 관심을 가져 주셔서 대단히 감사합니다!
버튼에 대해서는 아직 염려가 없습니다. 두 차트 모두 초기로드에서 그려야합니다.
<html>
<head>
<title>
Animated Gauge fed by Sheet
</title>
<!-- One script tag loads all the required libraries! Do not specify any chart types in the autoload statement. -->
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
</script>
<script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
//google.setOnLoadCallback(drawVisualization);
//google.setOnLoadCallback(drawTable);
//global variable manipulatedby the following 3 functions.
var wrap = new google.visualization.ChartWrapper();
var myTable = new google.visualization.ChartWrapper();
function drawGauge() {
// Define the chart using setters:
//var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('Gauge');
wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\&gid=0');
wrap.setContainerId('gauge_div');
wrap.setOptions({
'min': 0,
'max': 35,
//greenFrom:0,
//greenTo:10,
'yellowFrom': 15,
'yellowTo': 20,
'redFrom': 20,
'redTo': 30,
'greenColor': 999900,
'yellowColor': '#FFFF99',
'redColor': 660066,
'minorTicks': 10,
'animation':{
'duration': 800,
'easing': 'out'
}
//width of container determines whether gauges show up on same row or multiple rows
//'width':700
});
//alert('hello');
var elem = document.getElementById('gauge_div');
elem.style.opacity = 0.6;
wrap.draw();
}
function drawTable(){
myTable.setChartType('Table');
myTable.setContainerId('table_div');
myTable.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\#gid=0&headers=1');
myTable.setOptions({'width':200});
//alert('hello');
myTable.draw();
}
function changeValues() {
// Define the chart using setters:
//var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('Gauge');
wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\\n\&gid=2');
wrap.setContainerId('gauge_div');
wrap.setOptions({
'min': 0,
'max': 35,
//greenFrom:0,
//greenTo:10,
'yellowFrom': 15,
'yellowTo': 20,
'redFrom': 20,
'redTo': 30,
'greenColor': 999900,
'yellowColor': '#FFFF99',
'redColor': 660066,
'minorTicks': 10,
'animation':{
'duration': 800,
'easing': 'out'
}
//width of container determines whether gauges show up on same row or multiple rows
//'width':700
});
//alert('hello');
var elem = document.getElementById('gauge_div');
elem.style.opacity = 1.0;
wrap.draw();
}
function changeValuesBack() {
// Define the chart using setters:
//var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('Gauge');
wrap.setDataSourceUrl('https://docs.google.com/a/csd99.org/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=drive_web\n\\n\&gid=0');
wrap.setContainerId('gauge_div');
wrap.setOptions({
'min': 0,
'max': 35,
//greenFrom:0,
//greenTo:10,
'yellowFrom': 15,
'yellowTo': 20,
'redFrom': 20,
'redTo': 30,
'greenColor': 999900,
'yellowColor': '#FFFF99',
'redColor': 660066,
'minorTicks': 10,
'animation':{
'duration': 800,
'easing': 'out'
}
//width of container determines whether gauges show up on same row or multiple rows
//'width':700
});
//alert('hello');
var elem = document.getElementById('gauge_div');
elem.style.opacity = 0.6;
wrap.draw();
}
function drawVisualization(){
drawGauge();
drawTable();
}
</script>
</head>
<body>
<h3>Data for gauges located in this sheet on worksheets 1 and 2</h3>
<h3><a href = 'https://docs.google.com/spreadsheet/ccc?key=0AkmXRMp1VYawdFVEUmJlM3AzOUM3R0NMVlBzOTN5dlE&usp=sharing'> here.</a></h3>
<div id='gauge_div' style='height: 150px; width: 500px;'></div>
<div id='table_div'></div>
<input type="button" style="opacity:0.6" value="Last Month" onclick="changeValuesBack()"/>
<input type="button" value="This Month" onclick="changeValues()"/>
</body>
</html>
은하지에 대한 응답으로 페이지 로딩와 동기화 만들어지는을 Google 로더의 콜백이므로 API가로드되기 전에 코드가 실행되면 일부 문제가 발생할 가능성이 있습니다. 또한 불필요한 코드 중복과 데이터 소스의 재 쿼리가 필요합니다. 데이터 사본을 얻은 후에는 데이터 소스를 다시 쿼리 할 필요가 없도록 캐싱해야하지만 ChartWrappers의
감사합니다. 매우 도움이됩니다. 그것은 내가 고심하고있는 것을 볼 수있는 몇 가지 다른 문제들을 해결합니다. 'document.querySelector ('# lastMonth')와'lastMonth.disabled = null' 행이 무엇을하는지 이해하도록 도와 줄 수 있습니까? – Keith
'document.querySelector ('# lastMonth')'는'id'' 'lastMonth''로 입력을 얻습니다. ('querySelector' 메소드는 CSS 선택기를 사용하여 HTML에서 요소를 가져 오는보다 강력한 도구입니다. 'getElementById','getElementsByTagName' 등의 메소드). 'lastMonth.disabled = null'은'lastMonth' 버튼을 다시 활성화시켜 다시 클릭 할 수있게합니다. – asgallant
이 모든 것을 함께 넣으려고하면 일관성없는로드가 발생합니다. 일반적으로 gauge_div는 비어 있지만 때로는 잘로드됩니다.내 스크립트는 쿼리 소스 URL에 #gid 또는 & gid와 & head = 1 중 하나가 있는지에 매우 민감하게 보입니다. 때로는 페이지가 제대로로드됩니다. 나는 변화를 만들고, 효과가 없다. 원본으로 되 돌린 후에는 더 이상로드되지 않습니다. 어떤 아이디어? 내 전체 코드를 보여주고 싶지만 그 코드를 어디에서 할 것인지 잘 모르겠습니다. 인내심과 관심에 감사드립니다. 게이지를 먹이는 Google 시트를 열 었는지 여부와 어떻게 든 연관이있는 것 같습니다. – Keith