我正在尝试绘制MySQL返回的数据(' data'中返回的3列)。我在控制台中得到的结果很好,没有错误,但我仍然无法看到图表。此外,当我没有将变量传递给javascript以获取可变数据时,它工作正常。 (并且代码的d3部分绘制了预期的图形)然后我没有任何下拉,一个固定的图形显示。我调用" makeDataFromD3"是否有问题?功能。 我的HTML代码:
<script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/js/chart.js"></script>
<script type="text/javascript" src="/static/js/d3.js"></script>
<meta charset="utf-8">
<style type="text/css">
div.bar {
display: inline-block;
width: 20px;
height: 75px;
background-color: teal;
margin-right: 2px;
}
</style>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
document.getElementById("subcategory").length = 0;
switch (listindex)
{
.. create subcategory menu
}
return true;
}
function myfunction(){
a = document.getElementById("category").value;
b = document.getElementById("subcategory").value;
if (document.getElementById("category").value == "All"){
b = "NA";
}
document.write(a,b);
MYLIBRARY.init([a,b]);
MYLIBRARY.createChart();
}
</script>
{% endblock %}
{% block content %}
<div id="chartContainer1" >
</div>
<div id="chartContainer2" >
</div>
<div id="chartContainer3" >
</div>
<div id="chartContainer4" >
</div>
<div id="chartContainer5" >
</div>
<div id="chartContainer6" >
</div>
<form id = "dimensions" ></form>
<div class="category_div" id="category_div">Please specify Institution Type:
<select name="category" class="required-entry" id="category" form = "dimensions" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select Institution Type</option>
.. some options
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Please select Institution:
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="">Please select Institution</option></select>')
</script>
<noscript>
<select name="subcategory" id="subcategory" form = "dimensions" >
<option value="">Please select Institution</option>
</select>
</noscript>
</div>
<div><br>
<input type = "button" value = "Submit" id = "filter" form = "dimensions" onclick = "myfunction()">
</div>
这是我的js档案:
var MYLIBRARY = MYLIBRARY || (function(){
//var _args = {}; // private
return {
init : function(Args) {
_args = Args;
// some other initialising
console.log(_args)
},
createChart : function() {
getData(_args);
//alert('In createChart! -' + _args[0]);
}
};
}());
function getData(_args){
$.ajax({
url:"/getchartData?a="+_args[0]+"&b="+_args[1],
type:"GET",
success:function(data){
data = $.parseJSON(data);
console.log(data);
makeDataFromD3(data)
},
error:function(err,xhr,col){
console.log(err,xhr,col);
}
});
}
function makeDataFromD3(data){
for (ctr =1 ; ctr <3; ctr ++){
... d3 chart code
}
}