下拉菜单和可视化 [英] Drop down menu and visualization
本文介绍了下拉菜单和可视化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正试图添加一个下拉框菜单，我将在其中进行选择以可视化数据.没有下拉框，我的可视化效果很好，但是当我将它们放在一起时，出现了问题.在我的代码中，当我选择selection02时，我想可视化数据.有人可以帮我吗?
I'm trying to to add a drop-down box menu in which i will make my choice in order to visualize data. My visualization works fine without the drop-down box but when i put them together something goes wrong. In my code i want to visualize the data when i choose selection02. Could anyone help me?
<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>
推荐答案
<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>
这只是一个hack ...它可以按您的意愿工作...但是我相信应该有更好的方法来做..对不起，如果我没有帮助...
This is just an hack ... it works as you want it...but I am sure there should be a better way of doing it..sorry if I wasn't helpful...
这篇关于下拉菜单和可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
