时间戳

首页 > 解决方案 > Django页面，刷新页面时丢失ChartJs渲染图

html - Django页面，刷新页面时丢失ChartJs渲染图

问题描述

我已经成功地在我的homepage路径中渲染了图表，但是每当我刷新页面时，我都会丢失渲染的任何内容，而且我不是 100% 确定原因。

# urls.py
urlpatterns = [
    path('', chartData.homepage, name='homepage'),
    path('chart/', chartData.chart, name='chart'),
    path('api/chart/data/', chartData.as_view()),
]

我不确定问题出在哪里，而且我对 Ajax 还很陌生，所以我相信我遗漏了一些东西。

<form autocomplete="off" action="" method="GET">
    <div class="autocomplete">
        <input id="myInput" type="text" name="Item" placeholder="Enter Item">
    </div>
    <input type="submit" id="submitBtn" value="Search">
</form>

<div class="chart-container">
    <canvas id="myChart"></canvas>
</div>

<script type="text/javascript">
    var endpoint = 'api/chart/data/'
    var dataset = []
    var labels = []
    $('#submitBtn').click(function(e){
        e.preventDefault();
        var item = $('#myInput').val();
        $('#myInput').val('');
        window.history.pushState("object or string", "Title", "/?Item" + item);
        $.ajax({
            url: endpoint,  
            method: "GET",
            dataType: "text",
            success: function(){
                $.ajax({                    
                method: "GET",
                url: endpoint,
                data:{
                    'item': item,
                },
                success: function(data){
                    console.log(itemName)
                    labels = data.labels
                    dataset = data.dataset
                    var ctx = document.getElementById('myChart').getContext('2d')
                    var chart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [{
                                backgroundColor: 'rgb(255, 99, 132)',
                                borderColor: 'rgb(255, 99, 132)',
                                data: dataset,
                                fill: false,
                            }],
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            }
                        })
                    },
                    error: function(error_data){
                        console.log("error")
                        console.log(error_data)
                    }               
                })  
            }
        })          
    })          
</script>

<!--JavaScript file for autofill functionality in search bar-->
<script src="static/javascript/autofill.js"></script>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

在框中键入“apples”会返回127.0.0.1:8000/?Item=apples带有正确图表的 url，刷新会返回相同的 url 但没有任何渲染..？

更新 1
代码注释中的想法，不确定这是否是一个好方法？

<script type="text/javascript">
    function createGraph(data, item){
        labels = data.labels
        dataset = data.dataset
        var ctx = document.getElementById('myChart').getContext('2d')
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    data: dataset,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                title: { display: true, text: item, fontColor: '#000000', fontSize: 40},                                
                }
            })
    }

    var endpoint = 'api/chart/data/'
    var dataset = []
    var labels = []
    $('#submitBtn').click(function(e){
        e.preventDefault();
        var itemName = $('#myInput').val();
        $('#myInput').val('');
        window.history.pushState("object or string", "Title", "/?Item=" + item);
        $.ajax({
            url: endpoint,  
            method: "GET",
            dataType: "text",
            success: function(){
                $.ajax({                    
                method: "GET",
                url: endpoint,
                data:{
                    'item': item,
                },
                success: function(data){
                    createGraph(data, item)
                    }           
                })  
            }
        })          
    })

    //checking if jquery string exists outside of function and ajax
    //if exists, then you should run the ajax again alongside the createGraph function?

    //refreshing page without any values does console.log('False')
    //refreshing page with existing jquery string does console.log('Jquery string parameter exists...')
    if(location.search){
        var item = $('#myInput').val(location.search);
        $('#myInput').val('');
        console.log('Refreshing page, jquery string value = ' + item)
        console.log('Jquery string parameter exists...')
    }
    else {
        console.log('False')
    }

</script>

更新 2
我能够按照@Ben 下面所说的来解决刷新问题。我检查了是否存在 Jquery 字符串，如果存在，则通过 Ajax 调用重新呈现图形。

if(location.search){
    console.log('Jquery string exists...')
    $('#myInput').val('Apples') //replace 'Apples' with var that gets 
                                //jquery string
    var item = $('#myInput').val();
    console.log('Jquery string value = ' + item)
    $('#myInput').val('');
    var endpoint = 'api/chart/data/'
    var dataset = []
    var labels = []
        $.ajax({
        url: endpoint,  
        method: "GET",
        dataType: "text",
        success: function(){
            $.ajax({                    
                method: "GET",
                url: endpoint,
                data:{
                    'item': item,
                },
                success: function(data){
                createGraph(data, item)
                }           
            })  
        }
    })
}
else{
    console.log('False')
}

标签： htmljquerydjangoajaxdjango-views

解决方案

由于 Submitting ，您会得到一个结果 $('#submitBtn').click( [...]，正在下载的数据会触发图表的创建。

我建议将图表创建拉到它自己的函数中，然后在 api 返回数据成功时调用它，如果有可用参数，则在页面加载时调用它，即?Item=apples

<script type="text/javascript">
function createGraph(data) {
    console.log(itemName)
    labels = data.labels
    dataset = data.dataset
    var ctx = document.getElementById('myChart').getContext('2d')
    var chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: dataset,
                fill: false,
            }],
         },
         options: {
            responsive: true,
            maintainAspectRatio: false,
         }
    })
};
var endpoint = 'api/chart/data/'
var dataset = []
var labels = []
$('#submitBtn').click(function(e){
    e.preventDefault();
    var item = $('#myInput').val();
    $('#myInput').val('');
    window.history.pushState("object or string", "Title", "/?Item" + item);
    $.ajax({
        url: endpoint,  
        method: "GET",
        dataType: "text",
        success: function(){
            $.ajax({                    
            method: "GET",
            url: endpoint,
            data:{
                'item': item,
            },
            success: function(data){
                createGraph(data);
            [...]
            }}}

推荐阅读