无法从我的Django视图加载第二张Highcharts图

时间:2019-08-08 06:45:32

标签: python html json django highcharts

似乎无法在另一个轮播页面上加载第二个图表。我正在通过views.py的响应/请求来做到这一点。我能够显示第一个图表,但不能显示第二个图表。加载时未显示任何错误

看过“如何集成Django和Highcharts”文档,但我不知道如何在一页上实现两个图表

class dashboard_view(View): template_name = 'accounts/dashboard.html'

def get(self, request, *args, **kwargs):
    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, self.template_name, {'chart': dump})

def post(self, request, *args, **kwargs):
    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]
    }

    dump2 = json.dumps(chart2)

    return render(request, self.template_name, {'chart2': dump2})

  <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', {{ 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', {{ chart2|safe }});
              </script>
    </div>

0 个答案:

没有答案