highchart沒有顯示在django twitter bootstrap中
[英]highchart is not displaying in django twitter bootstrap
問題描述
我在django中顯示highchart時遇到問題。 我正在使用twitter bootstrap.chart未顯示在chart.html中。 有人可以幫我在這里做錯什么嗎？請在下面的Django版本中查找
Django的== 1.8.7
Django的highcharts == 0.1.7
base.html文件：
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
{% block title %}<title>mbr page </title>{% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static "mbr/css/boostrap-fluid-adj.css" %}" rel="stylesheet">
<link href="{% static "mbr/css/bootstrap.min.css" %}" rel="stylesheet" media="screen">
<link href="{% static "mbr/css/bootstrap-responsive.css" %}" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
@media (max-width: 980px) {
body {
padding-top: 0;
}
}
</style>
</head
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="/admin/">Login</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="active"><a href="/mbr/">Home</a></li>
<li><a href="{% url 'search_form' %}">Search s</a></li>
<li><a href="{% url 'results_list' %}">Results History</a></li>
<li><a href="{% url 'chart_test' %}">Statistics</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<h3> Name</h3>
<p class="active"><a href="/mbr/4/">TEST1</a></p>
<p><a href="/mbr/3/">TEST2</a></p>
<p><a href="/mbr/2/">TEST3</a></p>
<p><a href="/mbr/1/">TEST4</a></p>
</div>
</div>
<div class="span9">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<hr>
<script src="{% static 'mbr/js/jquery-3.2.0.js' %}"></script>
<script src="{% static 'mbr/js/bootstrap.min.js' %}"></script>
</body>
</html>
chart_test.html：
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<!--<script src="{% static "js/jquery.min.js" %}"></script>-->
<!--<script src="{% static "js/highcharts.js" %}"></script>-->
</head>
<body>
<script type="text/javascript">
$(function () {
$('#chart_container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Monthly Sales'
},
xAxis: {
categories: ['Jan','Feb','Mar','Apr']
},
yAxis: {
title: {
text: 'numbers'
}
},
series: [{
name: 'John',
data: [1, 0, 4]
}, {
name: 'King',
data: [5, 7, 3]
}]
});
});
</script>
<div id="chart_container" style="height: 300px"></div>
</body>
</html>
{% endblock %}
視圖：
def chart_test(request):
return render(request,'mbr/chart_test.html')
2 個解決方案
解決方案1
0 已采納 2017-03-29 10:38:46
chart_test.html擴展了base.html-它不再包含html / body標簽，並且您兩次加載了jquery-一次在base中，一次在chart_test中...嘗試類似的操作：
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<div id="chart_container" style="height: 300px"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function() {
$('#chart_container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Monthly Sales'
},
xAxis: {
categories: ['Jan','Feb','Mar','Apr']
},
yAxis: {
title: {
text: 'numbers'
}
},
series: [{
name: 'John',
data: [1, 0, 4]
}, {
name: 'King',
data: [5, 7, 3]
}]
});
});
</script>
{% endblock %}
解決方案2
0 2017-03-29 14:32:43
它通過在base.html文件的開頭放置jquery-3.2.0.js行來解決
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
{% block title %}<title>mbr page </title>{% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static "mbr/css/boostrap-fluid-adj.css" %}" rel="stylesheet">
<link href="{% static "mbr/css/bootstrap.min.css" %}" rel="stylesheet" media="screen">
<link href="{% static "mbr/css/bootstrap-responsive.css" %}" rel="stylesheet">
<script src="{% static 'mbr/js/jquery-3.2.0.js' %}"></script>
<style>
body {
padding-top: 50px;
}
@media (max-width: 980px) {
body {
padding-top: 0;
}
}
</style>
</head
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="/admin/">Login</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="active"><a href="/mbr/">Home</a></li>
<li><a href="{% url 'search_form' %}">Search s</a></li>
<li><a href="{% url 'results_list' %}">Results History</a></li>
<li><a href="{% url 'chart_test' %}">Statistics</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<h3> Name</h3>
<p class="active"><a href="/mbr/4/">TEST1</a></p>
<p><a href="/mbr/3/">TEST2</a></p>
<p><a href="/mbr/2/">TEST3</a></p>
<p><a href="/mbr/1/">TEST4</a></p>
</div>
</div>
<div class="span9">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<hr>
<script src="{% static 'mbr/js/bootstrap.min.js' %}"></script>
</body>
</html>
用於Twitter Bootstrap的Django和日期范圍選擇器組件
[英]Django and date range picker component for Twitter Bootstrap
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.