如何打开包含用javascript编写的图形的弹出窗口
How to open a Popup window which contains a graph written in javascript?
我正在使用Django来实现一个网站，我想添加一个按钮，这样当有人点击它时，它会打开一个弹出窗口，其中包含一个用javascript编写的图形。由于我是用Django编写网站的，所以我需要调用views.py中的一个函数来获取更新的数据，然后在此基础上绘制图表。我最初想在一个页面上更新图形，但现在我想打开一个弹出窗口。有人能帮我修改代码吗？这样按钮就会弹出一个较小的窗口，其中包含我实现的图形？谢谢这是我在main.html中的代码：
# I first have a button that could be clicked
<div class="col-lg-4">
<p><button class="btn btn-primary" type="button" name="display_list" id="display_list">Display List</button></p>
</div>
# here is the script I used to open up a Popup window such that the returned result would be displayed on that separate window
<script>
$(document).ready(function(){
$("#display_list").click(function(){
$.get("display_list/", function(ret){
$('#result').bPopup(); #I think probably I did this wrong?
});
});
});
</script>
这是我用来在一个单独的html文件（show_result.html）中绘制图形的代码：
<div id="result">
<script> javascript that draws a graph on html webpage. I pass the updated variable from the corresponding function in views.py to here by calling render(). </script>
</div>
这是我在视图中的函数.py:
def display_list(request):
#some function implementation to get the result and put it in context
return render(request, "show_result.html",context)
这是我的url文件中的代码：
url(r'^display_list/$', views.display_list, name='display_list'),
是否可以在html中弹出div？在这种情况下我该怎么办？
非常感谢。
有两种方法可以执行您想要的任务。以下是方法。
版本1（同步方式）
假设您有一个url，比如/x/，它打开main.html。因此，您可以在GET调用中将图形所需的任何数据添加到context。示例：
def x(request):
context = {}
# Add data that is needed to draw the graph, in your context
return render(request, "main.html",context)
现在，在main.html的context中，已经有了绘制图形所需的数据。现在，您可以简单地使用Bootstrap模式在弹出窗口中绘制图形。
<div class="col-lg-4">
<p><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal"id="display_list">Display List</button></p>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
您不需要#display_list上的click事件侦听器，因为Bootstrap可以处理它。
<script>
// Put your graph logic here and use '#modal-body' to render the graph
</script>
版本2（异步方式）
在这种情况下，我们已经在/x/上打开了页面，我们将通过AJAX GET调用从/display_list/获取数据。
def display_list(request):
''' Function to return data in json format to ajax call '''
context = {}
#Get all data required to draw the graph and put it in context
return JsonResponse(context)
由于当您单击要发送AJAX请求的按钮，然后打开模态时，需要从按钮中删除data-toggle="modal" data-target="#myModal"以防止其打开。将按钮更改为：
<p><button class="btn btn-primary" type="button" id="display_list">Display List</button></p>
现在，您可以点击url /display_list/来获取您的数据。在main.html中添加Bootstrap模态元素，如版本1中所示。现在将以下Javascript添加到main.html中以获取数据。
<script>
$(document).ready(function(){
$("#display_list").click(function(e){
e.preventDefault();
var modalBody = $("#modal-body");
// AJAX call to get the data
$.ajax({
url: '/display_list/',
type: 'GET',
success: function(data, status, xhr) {
console.log(data);
// Add your graph logic here and use modalBody to draw on it
}
});
//Now display the modal
$("#myModal").modal('show');
});
});
</script>
注意
记得添加Bootstrap的CSS和JS文件。
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
示例
因此，我将在示例中使用版本1。我正在使用此处提供的图表步骤1:您的view x应该如下所示：
def x(request):
context = {}
links = [
{'source': "Microsoft", 'target': "Amazon", 'type': "licensing"},
{'source': "Microsoft", 'target': "HTC", 'type': "licensing"},
{'source': "Samsung", 'target': "Apple", 'type': "suit"},
{'source': "Motorola", 'target': "Apple", 'type': "suit"},
{'source': "Nokia", 'target': "Apple", 'type': "resolved"},
{'source': "HTC", 'target': "Apple", 'type': "suit"},
{'source': "Kodak", 'target': "Apple", 'type': "suit"},
{'source': "Microsoft", 'target': "Barnes & Noble", 'type': "suit"},
{'source': "Microsoft", 'target': "Foxconn", 'type': "suit"},
{'source': "Oracle", 'target': "Google", 'type': "suit"},
{'source': "Apple", 'target': "HTC", 'type': "suit"},
{'source': "Microsoft", 'target': "Inventec", 'type': "suit"},
{'source': "Samsung", 'target': "Kodak", 'type': "resolved"},
{'source': "LG", 'target': "Kodak", 'type': "resolved"},
{'source': "RIM", 'target': "Kodak", 'type': "suit"},
{'source': "Sony", 'target': "LG", 'type': "suit"},
{'source': "Kodak", 'target': "LG", 'type': "resolved"},
{'source': "Apple", 'target': "Nokia", 'type': "resolved"},
{'source': "Qualcomm", 'target': "Nokia", 'type': "resolved"},
{'source': "Apple", 'target': "Motorola", 'type': "suit"},
{'source': "Microsoft", 'target': "Motorola", 'type': "suit"},
{'source': "Motorola", 'target': "Microsoft", 'type': "suit"},
{'source': "Huawei", 'target': "ZTE", 'type': "suit"},
{'source': "Ericsson", 'target': "ZTE", 'type': "suit"},
{'source': "Kodak", 'target': "Samsung", 'type': "resolved"},
{'source': "Apple", 'target': "Samsung", 'type': "suit"},
{'source': "Kodak", 'target': "RIM", 'type': "suit"},
{'source': "Nokia", 'target': "Qualcomm", 'type': "suit"}
]
context['links'] = links
return render(request, 'main.html', context)
步骤2:在main.html中，将以下内容添加到<head>标签中。
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
#licensing {
fill: green;
}
.link.licensing {
stroke: green;
}
.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.modal-dialog {
width: 63% !important;
}
</style>
步骤3:这将是您在main.html中的<body>标记，在这个标记中，您需要有一个全局var links = {{ links|safe }}变量。我们不能将脚本转移到一个单独的文件，因为django模板标签在那里不起作用。
<body>
<div class="col-lg-4">
<p><button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal" id="display_list">Display List</button></p>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
var links = {{ links|safe}};
var nodes = {};
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
function linkArc(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var width = 860,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("#modal-body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 6)
.call(force.drag);
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });
</script>
</body>
就是这样，你已经准备好出发了。仔细看，您不需要在#display_list中添加点击事件，因为Bootstrap处理所有这些。
这是一个JSBin演示
使用引导模式是完全可能的，下面是关于它的文档：http://www.w3schools.com/bootstrap/bootstrap_modal.asp
还有一个示例代码：
<div class="modal fade" id="id_you_want_for_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Title you want </h4>
</div>
<div class="modal-body">
<!-- Your Graph here -->
</div>
</div>
</div>
</div>
不要忘记在你的项目中包括引导程序js和css文件：
http://getbootstrap.com/getting-started/
http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
希望它能有所帮助！
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- 防止Iframe窗体在新窗口中打开
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 调整窗口大小时，可拖动的对象会出现在容器外部
- Javascript排序的图像弹出窗口..可以't单独弹出
- 窗口大小html css
- 弹出窗口出现，然后退出
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery）
- 有没有一个javascript图形绘制库可以进行气球树布局
- Javascript更新孙窗口中的表单元素
- 如何在选项卡上定义属性'的主窗口对象
- CSS-若窗口太小，滚动条会出现在“表格”单元格上
- 召回窗口加载事件 - javascript
- 如何防止高图工具提示弹出隐藏，在图形区域或浏览器窗口上调整大小
- 如何将图形放入模态窗口
- 调整窗口大小时调整 Jit 图形库的画布大小
- ChartJS赢得't在引导选项卡中绘制图形，直到窗口调整大小
- 在两个不同的浏览器窗口中使用dc.js crossfilter交互两个不同的图形
- 如何打开包含用javascript编写的图形的弹出窗口
- 如何在弹出jquery对话框窗口之前将数据绑定到图形
