如何在不刷新整个页面的情况下刷新django中的图表

Question

我是Django的新手，我曾用chart.js填充HTML中的图表。 我想刷新图表而不加载HTML本身。

HTML图表如下所示

对应于以上HTML的URL的视图如下

**Views.py**

   from __future__ import unicode_literals

from django.shortcuts import render
from django.views.generic import TemplateView
# Create your views here.
def dashboard(request):
    if request.is_ajax():
        print "this is ajax request inside dashboard function"
        pass_tc=29
        failed_tc=25
        inprogress_tc=25
        data = {'data':[pass_tc, failed_tc, inprogress_tc]}
        request.GET.get('data')
        print JsonResponse(data)
        return JsonResponse(data)

    context = {'data':[500,100,50]}
    template='dashboard.html'

    return render(request,template,context)



]

在HTML中，我使用了Chart.js的updateChart（）功能

<button class='btn btn-success' onclick="updateChart()">Refresh</button>

         <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
        labels: ['Pass', 'Fail', 'Inprogress'],
        datasets: [{
            label: 'Results',
            //backgroundColor: 'rgb(255, 99, 132)',
            //borderColor: 'rgb(255, 99, 132)',
            backgroundColor:[
            'green','Brown','orange'],
            data: [10, 10,15]
        }]
        },

    // Configuration options go here
        options: {},

        });
        function updateChart(){

   $.get("/dashboard/",{data:response.JsonResponse(data)}, function(data, status)
    {
        //console.log(data)

        chart.data.datasets[0].data={{data}};
        chart.update();
    }


        )


        };

在服务器端，我可以看到以下响应

this is ajax request inside dashboard function
Content-Type: application/json

{"data": [29, 25, 25]}
[15/Apr/2019 18:52:12] "GET /dashboard/ HTTP/1.1" 200 22

因此，Ajax请求正在获取数据。 但是，我的图表未填充此数据。

它使用View.py中定义的非Ajax数据，也显示在图表中，即

{'data':[500,100,50]}

我在Ajax请求中做错了什么。

Answer 1

当django将渲染的模板返回给客户端时，之后将无法进行任何更改。 这就是为什么您的图表无法反映Django所做的任何更改的原因。

如果您需要使用新数据更新图表，最简单的解决方案是使用AJAX请求。

• 用户按下刷新按钮
• Javascript将GET请求发送到Django API点
• Django将JSON中的新值返回给用户
• Javascript将使用新值更新图表

创建另一个端点，如下所示：

from django.http import JsonResponse

def dashboard_ajax_chart_data(request):
    pass_tc=500
    failed_tc=99
    inprogress_tc=50
    data = {'data':[pass_tc, failed_tc, inprogress_tc]}
    return JsonResponse(data)

在您的JavaScript代码中创建函数，如下所示：

jQuery('.refresh-button').click(function(){
        jQuery.getJSON("/dashboard_ajax/", function(data, status)
        {
            chart.data.datasets[0].data = data.data;
            chart.update();
        }
        )
});

并在单击刷新按钮时执行此功能。

我没有chart.js的适当经验，但是请使用本指南来更新您的图表。 https://www.chartjs.org/docs/latest/developers/updates.html