highchart没有显示在django twitter bootstrap中

Question

I am having problem with displaying highchart in django. 我在django中显示highchart时遇到问题。 I am using twitter bootstrap.Chart is not showing in chart.html. 我正在使用twitter bootstrap.chart未显示在chart.html中。 Can anyone help me what I am doing wrong here?Please find below version of django 有人可以帮我在这里做错什么吗？请在下面的Django版本中查找

Django==1.8.7 Django的== 1.8.7

django-highcharts==0.1.7 Django的highcharts == 0.1.7

base.html: 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: 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 %}

view: 视图：

def chart_test(request):   
     return render(request,'mbr/chart_test.html')

Answer 1

chart_test.html extends base.html - it should not contain html/body tag anymore and you load jquery twice - once in base and once in chart_test... try something like: 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 %}

Answer 2

It solved by placing line jquery-3.2.0.js beginning of base.html file 它通过在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>

highchart没有显示在django twitter bootstrap中

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-03-29 10:38:46

解决方案2
0 2017-03-29 14:32:43

highchart没有显示在django twitter bootstrap中

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-03-29 10:38:46

解决方案2 0 2017-03-29 14:32:43

解决方案1
0 已采纳 2017-03-29 10:38:46

解决方案2
0 2017-03-29 14:32:43