Question

我已经成功地在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>

在框中键入“苹果”将返回带有正确图表的网址127.0.0.1:8000/?Item=apples，刷新将返回相同的网址，但没有任何显示。.

更新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')
}

Answer 1

由于提交，您获得了结果 $('#submitBtn').click( [...]，正在下载的数据将触发图形的创建。

我建议将图表创建放入其自己的函数中，然后在api返回数据成功时调用它，如果有可用参数，即{{1 }}

?Item=apples

Django页面，刷新页面时丢失ChartJs呈现的图

1 个答案: