Amcharts 不顯示在模態彈出窗口中
[英]Amcharts is not displayed in modal popup
問題描述
我在我的 Web 應用程序中使用引導程序。
當我單擊大模態按鈕時，引導模式顯示但 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>
2 個解決方案
解決方案1
4 已采納 2014-12-15 06:38:34
問題在於圖表容器，或更准確地說，它的父級在圖表創建時被隱藏。 由於圖表無法正確測量其尺寸，因此在顯示模態時它不會出現。
您需要在顯示模態后構建（或強制重繪）圖表。
為此，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>
解決方案2
0 2020-10-22 06:24:48
如果您正在使用 angular js 並嘗試在 modalpopup 中呈現 amchart。 您需要使用 data-ng-init 並在該觸發器上呈現 amchart。
data-ng-init=loadamchart()
$scope.loadamchart = function()
{
// load the amchart here.
}
編輯模態彈出窗口以顯示在同一屏幕上
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.