javascript - 如何在django中刷新图表而不刷新整个页面

Question

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

HTML 图表如下所示

上面 HTML 的 URL 对应的 View 如下

**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 将渲染模板返回给客户端时，之后将无法进行任何更改。这就是为什么您的图表不反射(reflect) django 中所做的任何更改。

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

• 用户按下“刷新”按钮
• Javascript 向 django API 点发送 GET 请求
• 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