Amcharts 不显示在模态弹出窗口中
[英]Amcharts is not displayed in modal popup
问题描述
I am using bootstrap in my web application.
我在我的 Web 应用程序中使用引导程序。
when i click Large Modal Button, bootstrap modal showing but AMcharts is not showing.当我单击大模态按钮时，引导模式显示但 AMcharts 未显示。
In the modal i have defined chartdiv and trying to load trend chart from amcharts( http://www.amcharts.com/demos/trend-lines/ )在模式中，我定义了 chartdiv 并尝试从 amcharts( http://www.amcharts.com/demos/trend-lines/ ) 加载趋势图
why chart is not showing?为什么图表不显示？
<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>
2 个解决方案
解决方案1
4 已采纳 2014-12-15 06:38:34
The issues is that the chart container, or more correctly it's parent is hidden at the moment of chart creation.问题在于图表容器，或更准确地说，它的父级在图表创建时被隐藏。 Because of that the chart can't correctly measure it's dimensions, hence it's not appearing when modal is shown.由于图表无法正确测量其尺寸，因此在显示模态时它不会出现。
You need to build (or force to redraw) the chart after the modal is shown.您需要在显示模态后构建（或强制重绘）图表。
For this purpose Bootsrap's event "shown.bs.modal" suits the purpose nicely:为此，Bootsrap 的事件“shown.bs.modal”非常适合这个目的：
function ModalClick() {
alert('ModalClick');
$('#myModal').modal('show').on('shown.bs.modal', function () {
LoadChart();
});
}
This will take care of the opening the modal initially.这将负责最初打开模态。 If your users will be opening and closing the modal with a chart a few times, the chart will be rebuilt every time which is an unnecessary drain of resources.如果您的用户将多次打开和关闭带有图表的模式，则每次都会重新构建图表，这是不必要的资源消耗。
So, I would just modify your code to check whether the chart has already been built and just let it take in new dimensions by calling it's invalidateSize() method.所以，我只会修改你的代码来检查图表是否已经构建，并通过调用它的invalidateSize()方法让它接受新的维度。
For this, I will store the instance of the chart object as a data element in your modal object.为此，我将图表对象的实例作为数据元素存储在您的模态对象中。 (I will need to modify the LoadChart() function to return chart reference. （我需要修改LoadChart()函数以返回图表引用。
Here's the full code:这是完整的代码：
<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>
解决方案2
0 2020-10-22 06:24:48
if you are using angular js and trying to render amchart in modalpopup.如果您正在使用 angular js 并尝试在 modalpopup 中呈现 amchart。 you need to use data-ng-init and render the amchart on that trigger.您需要使用 data-ng-init 并在该触发器上呈现 amchart。
data-ng-init=loadamchart()
$scope.loadamchart = function()
{
// load the amchart here.
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
编辑模态弹出窗口以显示在同一屏幕上 - Edit Modal PopUp to be displayed on the same screen
网格显示为弹出窗口 - Grid to be displayed as popup
弹出框未显示 - Popup box is not getting displayed
Bootstrap modal不显示在手机中 - Bootstrap modal not displayed in mobile
Bootstrap模式弹出窗口不起作用 - Bootstrap modal popup not working
带URL的Javascript模式弹出窗口 - Javascript Modal Popup with URL
可调整大小的模态弹出窗口 - Resizable Modal Popup
模态弹出窗口在回发时关闭 - Modal Popup closes on Postback
模态弹出窗口在jQuery中不起作用 - Modal popup is not working in jquery
在JavaScript中打开模态弹出窗口 - Modal popup opening in javascript
相关标签