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

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

1 个答案: