Django和ChartJS

Question

我试图了解是否有可能将动态数据合并到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进行其他更改以告知它有关该对象的信息？我的假设是不，我正在传递此信息 View 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>

Answer 1

您不一定需要使用序列化程序来在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>