我在我的网络应用程序中使用bootstrap。
当我单击Large Modal Button时，引导模式显示但AMcharts未显示。
在模式中我定义了chartdiv并尝试从amcharts加载趋势图（http://www.amcharts.com/demos/trend-lines/）
为什么图表没有显示？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPageAMcharts.aspx.cs" Inherits="BootStrapApp.TestPageAMcharts" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="dist/css/animate.min.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<style type="text/css">
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<script>
function ModalClick() {
alert('ModalClick');
LoadChart();
$('#myModal').modal('show');
}
function LoadChart() {
alert('LoadChart()');
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"dataProvider": [{
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-02",
"value": 10
}, {
"date": "2012-01-03",
"value": 12
}, {
"date": "2012-01-04",
"value": 14
}, {
"date": "2012-01-05",
"value": 11
}, {
"date": "2012-01-06",
"value": 6
}, {
"date": "2012-01-07",
"value": 7
}, {
"date": "2012-01-08",
"value": 9
}, {
"date": "2012-01-09",
"value": 13
}, {
"date": "2012-01-10",
"value": 15
}, {
"date": "2012-01-11",
"value": 19
}, {
"date": "2012-01-12",
"value": 21
}, {
"date": "2012-01-13",
"value": 22
}, {
"date": "2012-01-14",
"value": 20
}, {
"date": "2012-01-15",
"value": 18
}, {
"date": "2012-01-16",
"value": 14
}, {
"date": "2012-01-17",
"value": 16
}, {
"date": "2012-01-18",
"value": 18
}, {
"date": "2012-01-19",
"value": 17
}, {
"date": "2012-01-20",
"value": 15
}, {
"date": "2012-01-21",
"value": 12
}, {
"date": "2012-01-22",
"value": 10
}, {
"date": "2012-01-23",
"value": 8
}],
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#000000",
"inside": true,
"lineAlpha": 0,
"toValue": 20,
"value": 10
}],
"position": "left",
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"valueField": "value"
}],
"trendLines": [{
"finalDate": "2012-01-11 12",
"finalValue": 19,
"initialDate": "2012-01-02 12",
"initialValue": 10,
"lineColor": "#CC0000"
}, {
"finalDate": "2012-01-22 12",
"finalValue": 10,
"initialDate": "2012-01-17 12",
"initialValue": 16,
"lineColor": "#CC0000"
}],
"chartScrollbar": {},
"chartCursor": {},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
"inside": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" onclick="ModalClick();">
Modal Button
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="chartdiv" style="width: 100%; height: 600px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="Scripts/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</form>
</body>
</html>
答案 0 :(得分：4)
问题在于图表容器，或更正确的是它的父级在创建图表时被隐藏。因为图表无法正确测量它的尺寸，因此在显示模态时它不会出现。
你需要在显示模态后构建（或强制重绘）图表。
为此目的，Bootsrap的活动“shown.bs.modal”非常适合这个目的：
function ModalClick() {
alert('ModalClick');
$('#myModal').modal('show').on('shown.bs.modal', function () {
LoadChart();
});
}
这将首先处理打开模态。如果您的用户将使用图表多次打开和关闭模式，则每次都会重建图表，这是不必要的资源消耗。
因此，我只想修改您的代码以检查图表是否已经构建，并通过调用它的invalidateSize()方法让它采用新的维度。
为此，我将图表对象的实例存储为模态对象中的数据元素。 （我需要修改LoadChart()函数以返回图表引用。
这是完整的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPageAMcharts.aspx.cs" Inherits="BootStrapApp.TestPageAMcharts" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="dist/css/animate.min.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<style type="text/css">
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<script>
function ModalClick() {
alert('ModalClick');
LoadChart();
$('#myModal').modal('show').on('shown.bs.modal', function () {
// get the chart
var chart = $(this).data('chart');
if ( chart ) {
// the chart was already built, let's just make it resize
chart.invalidateSize()
}
else {
// let's build the chart and store it together with
// modal element
$(this).data('chart', LoadChart());
}
});
}
function LoadChart() {
alert('LoadChart()');
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"dataProvider": [{
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-02",
"value": 10
}, {
"date": "2012-01-03",
"value": 12
}, {
"date": "2012-01-04",
"value": 14
}, {
"date": "2012-01-05",
"value": 11
}, {
"date": "2012-01-06",
"value": 6
}, {
"date": "2012-01-07",
"value": 7
}, {
"date": "2012-01-08",
"value": 9
}, {
"date": "2012-01-09",
"value": 13
}, {
"date": "2012-01-10",
"value": 15
}, {
"date": "2012-01-11",
"value": 19
}, {
"date": "2012-01-12",
"value": 21
}, {
"date": "2012-01-13",
"value": 22
}, {
"date": "2012-01-14",
"value": 20
}, {
"date": "2012-01-15",
"value": 18
}, {
"date": "2012-01-16",
"value": 14
}, {
"date": "2012-01-17",
"value": 16
}, {
"date": "2012-01-18",
"value": 18
}, {
"date": "2012-01-19",
"value": 17
}, {
"date": "2012-01-20",
"value": 15
}, {
"date": "2012-01-21",
"value": 12
}, {
"date": "2012-01-22",
"value": 10
}, {
"date": "2012-01-23",
"value": 8
}],
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#000000",
"inside": true,
"lineAlpha": 0,
"toValue": 20,
"value": 10
}],
"position": "left",
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"valueField": "value"
}],
"trendLines": [{
"finalDate": "2012-01-11 12",
"finalValue": 19,
"initialDate": "2012-01-02 12",
"initialValue": 10,
"lineColor": "#CC0000"
}, {
"finalDate": "2012-01-22 12",
"finalValue": 10,
"initialDate": "2012-01-17 12",
"initialValue": 16,
"lineColor": "#CC0000"
}],
"chartScrollbar": {},
"chartCursor": {},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
"inside": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
return chart;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" onclick="ModalClick();">
Modal Button
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="chartdiv" style="width: 100%; height: 600px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="Scripts/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</form>
</body>
</html>
答案 1 :(得分：0)
如果您正在使用angular js并尝试在modalpopup中渲染amchart。您需要使用data-ng-init并在该触发器上渲染amchart。
data-ng-init=loadamchart()
$scope.loadamchart = function()
{
// load the amchart here.
}