下拉菜單和可視化

我試圖添加一個下拉框菜單，我將在其中進行選擇以便可視化數據。我的可視化工作正常，沒有下拉框，但是當我把它們放在一起出現問題時。在我的代碼中，當我選擇selection02時，我想要可視化數據。任何人都可以幫我嗎？下拉菜單和可視化

<html> 
<head> 
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<script type="text/javascript"> 

function allagi() 
{ 
    if (document.getElementById("selection01").selected==true) 
    { 
     function01(); 
    } 
    else if (document.getElementById("selection02").selected==true) 
    { 
     f1(); 
    } 
    else if (document.getElementById("selection03").selected==true) 
    { 
     function03(); 
    } 
    else if (document.getElementById("selection04").selected==true) 
    { 
     function04(); 
    } 
} 


</script> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> 
function f1(){ 
{"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AihqKzH-MgAndERnaFVsYk1RLUM3S0pDSmNjcEQ4M1E&transpose=0&headers=0&range=A2%3AB13&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}}],"booleanRole":"certainty","animation":{"duration":0},"useFirstColumnAsDomain":true,"hAxis":{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},"isStacked":false,"width":454,"height":285},"state":{},"chartType":"AreaChart","chartName":"\u0393\u03c1\u03ac\u03c6\u03b7\u03bc\u03b1 1"} 
} 
</script> 



</head> 
<body> 



<div id="wrapper"> 
    <div id="logo"><select onchange="allagi()"> 
    <option id="selection01">Selection01</option> 
    <option id="selection02">Selection02</option> 
    <option id="selection03">Selection03</option> 
    <option id="selection04">Selection04</option> 
</select></div> 
    <div id="pie"> 






    </div> 
</div> 

</body> 
</html>

來源

2012-10-09 jimtour

嘗試通過值而不是使用id – Scorpio

你能否提供一個可用的jsfiddle示例（沒有選擇）？你的函數f1對我來說看起來是無效的。我不認爲你可以嵌套大括號沒有限定語句 –

<script type="text/javascript"> 
    function allagi() { 
    if (document.getElementById("d4ropdown1").value == "s1") 
    { 
    alert ("1"); 
    } 
else if (document.getElementById("selection02").value == "s2") 
    { 
    document.getElementById("VisualizationDisplay").style.display = "block"; 
    } 
    else if (document.getElementById("selection03").value == "s3") 
    { 
    alert("3"); 
    } 
    else if (document.getElementById("selection04").value == "s4") 
    { 
    alert("4"); 
    } 
    } 
</script> 


<div id="VisualizationDisplay" style="display:none"> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> 
{"dataSourceUrl":"https://docs.google.com/spreadsheet/tq?key=0AihqKzH-MgAndERnaFVsYk1RLUM3S0pDSmNjcEQ4M1E& transpose=0&headers=0&range=A2%3AB13&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}}],"booleanRole":"certainty","animation":{"duration":0},"useFirstColumnAsDomain":true,"hAxis":{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},"isStacked":false,"width":454,"height":285},"state":{},"chartType":"AreaChart","chartName":"\u0393\u03c1\u03ac\u03c6\u03b7\u03bc\u03b1 1"} </script> 

</div> 
<div id="logo"><select id="d4ropdown1" onchange="allagi()"> 
<option id="selection01" value="s1">Selection01</option> 
<option id="selection02" value="s2">Selection02</option> 
<option id="selection03" value="s3">Selection03</option> 
<option id="selection04" value="s4">Selection04</option> 
</select></div>

這只是一個黑客...它的工作原理，你想要它......但我相信應該有做it..sorry如果我是沒有幫助的更好的方法。 ..

來源

2012-10-09 14:24:36 Scorpio

非常感謝您的回答，但我的問題是我無法想象我的數據。我無法將第一個腳本（下拉框）與第二個腳本（可視化）鏈接起來，因爲它們具有不同的src。 – jimtour

調試時是否有任何錯誤信息。 – Scorpio

是的，有一個錯誤，但我找不到它。儘管如此，可視化效果很好 – jimtour

我相信你寫的JavaScript在語法上是無效的。

你寫過function f1() { "string" }其中「字符串」看起來像一個JSON字符串。我認爲你的意圖是編寫代碼來調用一個函數來傳遞這個字符串作爲參數，但我不知道你使用的服務的語法。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> 
function f1(){ 
{"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AihqKzH-MgAndERnaFVsYk1RLUM3S0pDSmNjcEQ4M1E&transpose=0&headers=0&range=A2%3AB13&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}}],"booleanRole":"certainty","animation":{"duration":0},"useFirstColumnAsDomain":true,"hAxis":{"useFormatFromData":true,"viewWindowMode":"pretty","viewWindow":{}},"isStacked":false,"width":454,"height":285},"state":{},"chartType":"AreaChart","chartName":"\u0393\u03c1\u03ac\u03c6\u03b7\u03bc\u03b1 1"} 
} 
</script>

來源

2012-10-09 18:23:03

感謝您的答案。我試圖通過使用下拉框來顯示我的數據。我的可視化工作正常，但我不能把它放在下拉框中。 – jimtour

下拉菜單和可視化

回答

相關問題