2017-03-29 61 views
0

我在django中顯示高圖的問題。我正在使用twitter bootstrap.Chart沒有顯示在chart.html中。誰能幫我我在做什麼錯在這裏請查看以下版本的Django的高圖不顯示在Django的twitter引導

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') 

回答

0

chart_test.html擴展base.html文件 - 它不應該包含HTML/body標籤了,你加載的jQuery兩次 - 一次在基地和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 %} 
+0

其仍然沒有工作 – jisan

+0

對不起解決,在腳本中的錯字 - 有功能和()之間的空間 - 已經刪除了 – micebrain

+0

謝謝!但它沒有區別。 – jisan

0

它通過將行jQuery的3.2.0.js開始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"> 
<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>