Как обновить график в Django, не обновляя всю страницу

Question

Я новичок в Django, я использовал chart.js для заполнения диаграммы в HTML.Я хочу обновить диаграмму без загрузки самого HTML.

HTML-диаграмма выглядит следующим образом

Просмотр, соответствующий URL-адресу длявыше HTML ниже

**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 я использовал updateChart () функциональность Chart.js

<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 извлекает данные.Однако мой график не заполняется этими данными.

он использует не Ajax-данные, определенные в View.py, также показанные на графике, то есть

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

Что неправильно я делаю в своем запросе Ajax.

Answer 1

Когда django вернет обработанный шаблон клиенту, он не сможет впоследствии вносить изменения. Вот почему ваш график не отражает изменений, внесенных в django.

Если вам необходимо обновить диаграмму новыми данными, самым простым решением будет использование запроса AJAX.

• Пользователь нажимает кнопку Обновить
• Javascript отправляет GET-запрос к точке API django
• 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