我尝试按照以下解决方案在 Highchart 的帮助下显示图表:
通过 JSON 将 Django 数据库查询集传递到 Highcharts https://stackoverflow.com/questions/27810087/passing-django-database-queryset-to-highcharts-via-json
但我无法让数据出现:
对此仍然陌生,感谢您的帮助,伙计们!
views.py
class ChartData(object):
def check_valve_data():
data = {'member_no': []}
people = Member.objects.all()
for unit in people:
data['member_no'].append(unit.member_no)
return data
def chartViewHigh(request, chartID='chart_ID', chart_type='column', chart_height=500):
data = ChartData.check_valve_data()
chart = {"renderTo": chartID, "type": chart_type, "height": chart_height, }
title = {"text": 'Check Member Data'}
xAxis = {"title": {"text": 'Member'}, "categories": data['member_no']}
yAxis = {"title": {"text": 'Data'}}
return render(request, 'chart/chartViewHigh.html', {'chartID': chartID, 'chart': chart,
'title': title, 'xAxis': xAxis, 'yAxis': yAxis})
ChartViewHigh.html
{% extends 'base.html' %}
{% load staticfiles i18n %}
{% block head %}
<link href="{% static 'css/chart.css' %}" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
{% endblock head %}
{% block main %}
<h1 align="center">Analysis</h1>
{% block content %}
<div id={{ chartID|safe }} class="chart" style="height:100px; width:100%"></div>
{% endblock %}
{% block extrajs %}
<script>
var chart_id = {{ chartID|safe }};
var chart = {{ chart|safe }};
var title = {{ title|safe }};
var xAxis = {{ xAxis|safe }};
var yAxis = {{ yAxis|safe }};
</script>
<script>
$(document).ready(function() {
$(chart_id).highcharts({
chart: chart,
title: title,
xAxis: xAxis,
yAxis: yAxis,
});
});
</script>
{% endblock %}
{% endblock main %}
urls.py
urlpatterns = patterns[
url(r'^chartViewHigh/$', views.chartViewHigh, name='chartViewHigh'),
]