Django 和 ChartJS
Posted
技术标签:
【中文标题】Django 和 ChartJS【英文标题】：Django and ChartJS 【发布时间】：2018-12-02 20:08:14 【问题描述】：我试图了解是否可以将动态数据合并到 Django Chart JS 架构中。我浏览了几个教程，最终让 Django 与 ChartJS 一起工作，当我能够对值进行硬编码然后显示相关图表时，这非常好。我最终要做的是对我的数据库中的动态数据进行同样的练习。我在 SO，https://***.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>
【问题讨论】：
【参考方案1】：您不一定需要使用序列化程序在 Chart.js 中呈现动态数据（尽管如果您愿意，也可以这样做）。您可以像往常一样在适当的位置迭代您的 Django 上下文变量。下面是一个折线图示例。我会玩这个例子，但这应该向您展示如何使用 Django 上下文变量轻松呈现动态数据。
...
<canvas id="funchart" ></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>
【讨论】：
感谢您的提示。我正在尝试通过按照您的建议添加上下文来使其工作，但似乎无法使其工作。我已经用我尝试过的上下文更新了我原来的问题。我正在使用基于类的 TemplateView。我收到了几个错误，并且已经解决了所有错误，但现在即使我的查询显示我正在捕获我想要的数据，也没有任何结果。在此先感谢您的指点。 我基本上可以使用上面概述的代码，除了让标签正确呈现。我有 i.id 来获取标签，它显然会给我号码。我整个下午都在尝试让 ID 呈现为模板中的名称，但无济于事。我已经进行了多次搜索，但无法弄清楚为什么我无法将 ID 转换为标签名称。【参考方案2】：我下面的代码最终解决了如何获取动态用户数据的问题。我仍在试图弄清楚如何让标签正常工作。此解决方案允许标签显示 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
图表视图
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)
图表视图
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
【讨论】：
【参考方案3】：所以我在这里一直在做同样的事情，我认为你的标签没有显示，因为 chart.js 上的标签只需要一个字符串，所以在你的标签上试试这个：
labels: [% for i in book %" i.id ",% endfor %]
【讨论】：
以上是关于Django 和 ChartJS的主要内容，如果未能解决你的问题，请参考以下文章
Django搭建个人博客平台2---创建一个Django项目和项目梳理