我正在尝试通过 AJAX 提交两个单独的表单来加载两个 amchart。我能够加载第一个 amchart，但在对第二个 amchart 使用相同的过程时，我无法执行此操作。如果我对两个上午图表使用相同的 div id，那么我可以在第一个图表的 div 中看到第二个图表。
以下是 HTML 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>Evo Dashboard</title>
<meta name="description" content="chart created using amCharts live editor" />
<style>
#chartdiv {
width : 100%;
height : 300px;
font-size : 11px;
}
.amcharts-export-menu-top-right {
top: 10px;
right: 0;
}
</style>
<!-- amCharts javascript sources -->
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Bootstrap Core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="static/css/sb-admin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="static/css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
console.log("reached here");
var prstatsjsonData ='{{prstats}}';
var publishedVersion='{{pubversion}}';
var pbverArray = [];
var version;
//console.log("prstats ", prstatsjsonData);
var result=JSON.parse(prstatsjsonData.replace(/"/g,'"'));
var pubver=JSON.parse(publishedVersion.replace(/"/g,'"'));
function pbverToArray(){
pbverArray = $.map(pubver, function(el) { return el; });
console.log(pbverArray);
return pbverArray;
}
$(document).ready(function() {
// calling multiple ajax from a selected version
$('#selectVersion').change(function(){
version = document.getElementById("selectVersion").value;
console.log(version);
//ajax call to get YVM Stats
$('#getSmokeStatsGeneric').one("submit",function(e)
{
var YVM_smoke_details = [];
e.preventDefault();
alert("hello");
$.ajax({
url:"/getSmokeStatsGeneric/"+version,
type: "GET",
data: {"version":document.getElementById("selectVersion").value},
success:function(data)
{
e.preventDefault();
var result = JSON.parse(data);
console.log(result);
console.log("printing jobs");
var Pass={};
var Fail={};
var Error={};
var Total={};
var chart;
var count;
Pass.type = "Pass";
Pass.count = result.YVM.result[0].PassYVM;
Pass.color="#04D215";
Fail.type = "Fail";
Fail.count = result.YVM.result[0].FailYVM;
Fail.color="#2A0CD0";
Error.type = "Error";
Error.count = result.YVM.result[0].ErrorYVM;
Error.color="#FF0F00";
// Total.type = "Total";
// Total.count = result.YVM.result[0].TotalYVM;
// Total.color="#FCD202";
YVM_smoke_details.push(Pass);
YVM_smoke_details.push(Fail);
YVM_smoke_details.push(Error);
//smoke_details.push(Total);
console.log("chart data :",JSON.stringify(YVM_smoke_details));
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": YVM_smoke_details,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "YVM Performance for today"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "count"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "type",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
return false;
},
error:function (xhr, textStatus, thrownError)
{
console.log(thrownError);
alert(xhr.status +":"+ xhr.responseText);
}
});
return false;
});
// ajax call to see the HW stats
$('#getSmokeStatsHW').one("submit",function(e)
{
var HW_smoke_details=[];
e.preventDefault();
alert("hello");
$.ajax({
url:"/getSmokeStatsHW/"+version,
type: "GET",
data: {"version":document.getElementById("selectVersion").value},
success:function(data)
{
e.preventDefault();
var result = JSON.parse(data);
console.log("printing HW STATS");
console.log(result);
var Pass={};
var Fail={};
var Error={};
var Total={};
var count;
Pass.type = "Pass";
Pass.count = result.HW.result[0].PassHW;
Pass.color="#04D215";
Fail.type = "Fail";
Fail.count = result.HW.result[0].FailHW;
Fail.color="#2A0CD0";
Error.type = "Error";
Error.count = result.HW.result[0].ErrorHW;
Error.color="#FF0F00";
// Total.type = "Total";
// Total.count = result.YVM.result[0].TotalYVM;
// Total.color="#FCD202";
HW_smoke_details.push(Pass);
HW_smoke_details.push(Fail);
HW_smoke_details.push(Error);
//smoke_details.push(Total);
console.log("chart data :",JSON.stringify(HW_smoke_details));
var chart = AmCharts.makeChart("chart2div", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": HW_smoke_details,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "HW Performance for today"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "count"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "type",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
},
error:function (xhr, textStatus, thrownError)
{
console.log(thrownError);
alert(xhr.status +":"+ xhr.responseText);
}
});
});
});
});
</script>
</head>
<body>
<script>
pbverToArray();
</script>
<div id="wrapper">
<!-- /.row -->
<div class="row">
<label>Select a User</label>
<select id="selectVersion" class="form-control">
<option>Choose a Published Version</option>
<script>
for(version in pbverArray)
{
document.write('<option value="' + pbverArray[version]+'">' + pbverArray[version] + '</option>');
}
</script>
</select>
</div>
<div class="row">
<div class="col-lg-12">
<form id="getSmokeStatsGeneric" name="getSmokeStatsGeneric" action="/getSmokeStatsGeneric/">
<div class="form-group">
</div>
<input type="submit" value="See YVM Trends">
</form>
</div>
</div>
<!-- /.row -->
<!-- Flot Charts -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>YVM Performance for today</h3>
</div>
<div class="panel-body">
<p class="lead">YVM Performance</p>
<div class="flot-chart" style="height: 315px;">
<div id="chartdiv"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form id="getSmokeStatsHW" name="getSmokeStatsHW" action="/getSmokeStatsHW/">
<div class="form-group">
</div>
<input type="submit" value="See hW Trends">
</form>
</div>
</div>
<!-- /.row -->
<!-- Flot Charts -->
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>HW Performance for today</h3>
</div>
<div class="panel-body">
<p class="lead">HW Performance</p>
<div class="flot-chart" style="height: 315px;">
<div id="chart2div"></div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- /.row -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
<!-- /#wrapper -->
<!-- jQuery -->
<script src="static/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="static/js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="static/js/plugins/morris/raphael.min.js"></script>
<script src="static/js/plugins/morris/morris.min.js"></script>
<script src="static/js/plugins/morris/morris-data.js"></script>
</body>
</html>
当我打开 Chrome 浏览器控制台时，我可以看到以下错误:
Error in event handler for (unknown): TypeError: Cannot read property 'selectors' of undefined
at chrome-extension://ocifcklkibdehekfnmflempfgjhbedch/include.preload.js:95:33
morris.min.js:6 Uncaught Error: Graph container element not found
最佳答案
问题是，您无法在已有另一个图表的同一容器中创建新图表。您首先需要通过调用 clear() 销毁第一个图表实例。方法就可以了。
话虽如此，可能还有比重新创建图表更好的方法。查看代码，我认为这两个图表是相同的，除了数据和标题之外。
考虑到这一点，通过更新标题和数据来重用已创建的图表对象总是更好(更不用说更快)。
您可以通过访问 AmCharts.charts 检查另一个图表是否已创建。数组。
更新任何设置和/或数据后，我们只需调用 validateNow()函数来接受更改。
即:
if(AmCharts.charts.length) {
// the chart already exists
// let's just update it's data and title
var chart = AmCharts.charts[0];
chart.valueAxes[0].title = "HW Performance for today";
chart.dataProvider = HW_smoke_details;
chart.validateNow(true);
}
else {
// create new chart
var chart = AmCharts.makeChart("chartdiv", {
...
});
}
关于javascript - Ajax、amcharts、javascript、mongodb、django，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31707545/