[英]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>
这是我在views.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(同步方式)
假设您有一个网址说/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>
现在,您可以点击网址/display_list/
来获取数据。 在您的main.html
添加版本1中的Bootstrap模态元素。 现在,将以下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>
就是这样,您准备好了。 仔细看一下,因为Bootstrap处理了所有这些操作,所以您不需要向#display_list
添加click事件。
这是一个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>
不要忘记在您的项目中包含bootstrap js和css文件:
http://getbootstrap.com/getting-started/
http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
希望能帮助到你 !
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.