我试图了解是否有可能将动态数据合并到Django Chart JS体系结构中。我经历了一些教程,最终使Django与ChartJS一起使用,当我能够对值进行硬编码然后显示相关图形时,这非常好。我最终想要做的是使用来自数据库的动态数据进行的同一练习。我在https://stackoverflow.com/questions/47575896/dynamic-chart-using-django-and-chart-js#=中找到了相同的问题,但没有任何人回答。这正是我要实现的目标。我已经研究了序列化器,我是否需要先序列化数据?预先感谢您的想法和反馈。
根据反馈,我已向有问题的图表添加了上下文,但数据仍未通过。这是我的观点:
class ChartView(LoginRequiredMixin, TemplateView):
model = Myobject
template_name = 'director/chart.html'
def get_context_data(self, **kwargs):
context = super(ChartView, self).get_context_data(**kwargs)
myobject = Myobject.objects.filter(field__in=self.request.user.userprofile.field.all())
print(myobject)
context['myobject'] = myobject
return context
我只得到一个空白屏幕,根本没有图表,这表明显然有问题。我是否需要对Javascript进行其他更改以告知它有关该对象的信息?我的假设是不,我正在传递此信息视图context_data。
我也在使用Ajax,所以我不确定这是否是一个复杂的因素。这是我的JavaScript。
<script>
var endpoint = '{% url "myobject:chart_data" %}'
var defaultData = [];
var labels = [];
$.ajax({
method: "GET",
credentials: 'same-origin',
url: endpoint,
success: function(data){
labels = data.labels
defaultData = data.default
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [{% for i in myobject %}{{ i.labels }},{% endfor %}],
datasets: [{
data: [{% for i in myobject %}{{ i.data }},{% endfor %}]
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(153, 102, 255, 1)',
],
borderWidth: 1
}]
}
})
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
</script>
答案 0 :(得分:2)
您不一定需要使用序列化程序来在Chart.js中呈现动态数据(尽管您愿意的话也可以)。您可以在适当的位置像平常一样遍历Django上下文变量。以下是折线图示例。我将使用这个示例,但这将向您展示如何使用Django上下文变量轻松呈现动态数据。
...
<canvas id="funchart" width="75" height="50"></canvas>
<script type="text/javascript">
var a = document.getElementById('funchart').getContext('2d');
var myLineChart = new Chart(a, {
type: 'line',
data: {
labels:[{% for i in myobject %}{{ i.labels }},{% endfor %}],
datasets: [{
label:'My Dot',
data: [{% for i in myobject %}{{ i.data }},{% endfor %}]
}]
},
options:{
scales: {
xAxes: [{
display:true
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
答案 1 :(得分:0)
下面的代码最终解决了如何获取动态用户数据的问题。我仍在尝试弄清楚如何使标签正常工作。此解决方案允许标签显示带有ID号的标签,这不是最佳选择,但是我为标签问题打开了单独的SO。
我的HTML
{% extends 'base5.html' %}
{% block body_block %}
<div class="box6">
<h1 class="title">Number of Books By Author</h1>
<canvas id="myChart"></canvas>
<div>
<script>
var endpoint = '{% url "Books:chart_data" %}'
var defaultData = [];
var labels = [];
array = {{ procedures3 }}
$.ajax({
method: "GET",
credentials: 'same-origin',
url: endpoint,
success: function(data){
defaultData = data.default
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [{% for i in book %}{{ i.id }},{% endfor %}],
datasets: [{
label: "# of Procedures",
data: [{% for j in book_count %}
{{ j }},
{% endfor %}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
})
},
error: function(error_data){
console.log("error")
console.log(error_data)
},
})
</script>
{% endblock %}
Views.py
ChartView
class ChartData(LoginRequiredMixin,APIView):
model = Author
authentication_classes = (SessionAuthentication, BasicAuthentication)
permission_classes = (IsAuthenticated,)
def get(self, request, format=None):
default_items = []
labels = []
data = {
"labels": labels,
"default": default_items,
}
return Response(data)
ChartView
class ChartView(LoginRequiredMixin, TemplateView): template_name = 'Book/chart.html'
def get_context_data(self, **kwargs):
context = super(ChartView, self).get_context_data(**kwargs)
book = Author.objects.filter(id__in=self.request.user.userprofile.author.all()).order_by('id')
books_count = [ Book.objects.filter(author=cls).count() for cls in book ]
context['book'] = book
context['book_count'] = books_count
return context
答案 2 :(得分:0)
所以我在这里一直在做同样的事情,我认为您的标签没有显示出来,因为chart.js上的标签只需要一个字符串,因此请在您的标签上尝试一下:
labels: [{% for i in book %}"{{ i.id }}",{% endfor %}]