无法在我的HTML页面上显示另一个Highcharts图表-Django

Question

一直在查看Highcharts文档，以及simpleisbetterthancomplex的“集成Django和Highcharts”。 我不确定我的代码出了什么问题，第二个图表没有显示。 我正在使用Django views.py从数据库中检索数据。

 def dashboard_viewUser(request): dataset = Profile.objects\\ .values('is_active')\\ .annotate(is_active_count = Count('is_active', filter = Q(is_active = True)), not_is_active_count = Count('is_active', filter = Q(is_active = False)))\\ .order_by('is_active') categories = list() is_active_series_data = list() not_is_active_series_data = list() for entry in dataset: categories.append('%s Active' % entry['is_active']) is_active_series_data.append(entry['is_active_count']) not_is_active_series_data.append(entry['not_is_active_count']) is_active_series = { 'name': 'Active user', 'data': is_active_series_data, 'color': 'green' } not_is_active_series = { 'name': 'Inactive user', 'data': not_is_active_series_data, 'color': 'red' } chart = { 'chart': { 'type': 'column' }, 'title': { 'text': 'Active user on Current Platform' }, 'xAxis': { 'categories': categories }, 'yAxis': { 'title': { 'text': 'No.of users' }, 'tickInterval': 1 }, 'plotOptions': { 'column': { 'pointPadding': 0.2, 'borderWidth': 0 } }, 'series': [is_active_series, not_is_active_series] } dump = json.dumps(chart) return render(request, 'accounts/dashboard.html', { 'chart': dump }) ` def dashboard_viewDepartment(request): dataset = Department.objects \\ .values('department') \\ .annotate(IT_count=Count('department', filter=Q(department="IT")), Sales_count=Count('department', filter=Q(department="Sales")), Admin_count=Count('department', filter=Q(department="Admin")), HR_count=Count('department', filter=Q(department="HR")),) \\ .order_by('department') categories = list() IT_series_data = list() Sales_series_data = list() Admin_series_data = list() HR_series_data = list() for entry in dataset: categories.append('%s Department' % entry['department']) IT_series_data.append(entry['IT_count']) Sales_series_data.append(entry['Sales_count']) Admin_series_data.append(entry['Admin_count']) HR_series_data.append(entry['HR_count']) IT_series = { 'name': 'IT', 'data': IT_series_data, 'color': 'green' } Sales_series = { 'name': 'Sales', 'data': Sales_series_data, 'color': 'yellow' } Admin_series = { 'name': 'Admin', 'data': Admin_series_data, 'color': 'red' } HR_series = { 'name': 'HR', 'data': HR_series_data, 'color': 'blue' } chart2 = { 'chart': {'type': 'column'}, 'title': {'text': 'Containers per department'}, 'xAxis': {'categories': categories}, 'yAxis': { 'title': { 'text': 'No.of containers'}, 'tickInterval': 1 }, 'plotOptions': { 'column': { 'pointPadding': 0.2, 'borderWidth': 0 } }, 'series': [IT_series, Sales_series, Admin_series, HR_series] } dump = json.dumps(chart2) return render(request, 'accounts/dashboard.html', {'chart2': dump}) 

 <div class="carousel-inner"> <div class="carousel-item active"> <div class="border" id="container" style="min-width: 100px; height: 400px; margin: 0 auto;"></div> <script src="https://code.highcharts.com/highcharts.src.js"> </script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> Highcharts.chart('container', { { chart | safe } }); </script> </div> <div class="carousel-item"> <div class="border" id="container2" style="min-width: 100px; height: 400px; margin: 0 auto;"></div> <script src="https://code.highcharts.com/highcharts.src.js"> </script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script> Highcharts.chart('container2', { { chart2 | safe } }); </script> </div> <div class="carousel-item"> <div class="carousel-caption"> <h3>Currently Unavailable</h3> </div> </div> </div> 

预期两个图表将显示在轮播的两个不同面板上

Answer 1

实际上，您只需要一个highchart和jquery.min.js的脚本src。 将chart2更改为chart。

 <script src="https://code.highcharts.com/highcharts.src.js"> 
 </script>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script>
<div class="carousel-inner">
 <div class="carousel-item active">
 <div class="border" id="container" style="min-width: 100px; height: 
      400px; margin: 0 auto;"></div>       
  Highcharts.chart('container', {{ chart|safe }});
 </script>
 </div>
 <div class="carousel-item">
 <div class="border" id="container2" style="min-width: 100px; 
 height: 400px; margin: 0 auto;"></div>

 <script>
                      Highcharts.chart('container2', {{ chart|safe }});
                  </script>
        </div>
        <div class="carousel-item">
          <div class="carousel-caption" >
              <h3>Currently Unavailable</h3>
          </div>
       </div>
</div>

Answer 2

您不需要多个jquery / highchart。 只需将其放在页面顶部一次，即可在多个图表中正常使用。 我已经对您的代码进行了一些更新，由于无法访问安全方法输出的数据，因此已将图表初始化为空白图表。

  <!-- Place your javascripts once -->
  <script src="https://code.highcharts.com/highcharts.src.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="border" id="container" style="min-width: 100px; height: 
                    400px; margin: 0 auto;"></div>

      <script>
        Highcharts.chart('container', {
          title: {
            text: 'Im Chart 1' // Replace your {{ chart|safe }} here.
          },
        });

      </script>
    </div>
    <div class="carousel-item">
      <div class="border" id="container2" style="min-width: 100px; 
                   height: 400px; margin: 0 auto;"></div>

      <script>
        Highcharts.chart('container2', {
          title: {
            text: 'Im Chart 2' //Replace your {{ chart2|safe }} here.
          },
        });

      </script>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <h3>Currently Unavailable</h3>
      </div>
    </div>
  </div>

查看此小提琴以获取有效的输出。

https://jsfiddle.net/ebkr65ma/