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/

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

2 个答案: