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

我是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();
    }


        )


        };

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

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

---

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

当django将呈现的模板返回给客户端时，它将无法在以后进行任何更改。这就是为什么你的图表没有反映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)

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

在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)

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

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

---

我没有使用chart.js的适当经验，但请使用本指南更新您的图表

当django将呈现的模板返回给客户端时，它将无法在以后进行任何更改。这就是为什么你的图表没有反映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)

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

在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)

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

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

---

我没有使用chart.js的适当经验，但请使用本指南更新您的图表

我已经按照你的建议编辑了我的代码，但仍然是同一个问题！！我在原始问题中更新的所有相关信息。@pankajmishra您是否向

url.py

添加了新端点？django是否按要求提供服务？您是否收到javascript中的新数据？使用

console.log（data）

调试它。这是因为

url.py

对两个端点使用相同的函数。我已经编辑了我的代码和问题，从Ajax查询中获取响应时似乎出现了一些问题。请尝试使用版本-很可能您的响应没有被解释为JSONI根据您的建议编辑了我的代码，但仍然是相同的问题！！我在原始问题中更新的所有相关信息。@pankajmishra您是否向

url.py

添加了新端点？django是否按要求提供服务？您是否收到javascript中的新数据？使用

console.log（data）

调试它。这是因为您的

url.py

对两个端点使用相同的函数。我已经编辑了我的代码和问题，从Ajax查询获取响应时似乎出现了一些问题。请尝试使用版本-很可能您的响应没有解释为JSON