【发布时间】：2019-12-15 16:13:39
【问题描述】：
一直在查看 Highcharts 文档以及 simpleisbetterthancomplex 的“Integrating Django and 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>期望两个图表显示在轮播的两个不同面板上
【问题讨论】：
-
嗨@Django新手，你能提供我生成的JS和HTML代码吗？
标签： javascript jquery django highcharts