Django Graphos图表未使用Ajax加载表更新

时间:2017-05-30 07:38:22

标签: django python-2.7

我一直在使用django graphos并且它工作正常,直到我意识到当我通过ajax而不是页面刷新更新我的表时不绘制图表。让我进一步描述这个问题。

  1. 首次加载我的页面时,使用{{chart.as_html}}正确加载所有图表。顺便说一下,我正在使用django。

  2. 此图表显示在表格中。

  3. 但是当用户从下拉列表中选择不同的值并单击重新加载时,我的代码将仅通过ajax而不是整页刷新来更新表。不幸的是,当表格更新时,不会显示包含新数据的图表。它只是空白。我可以看到开发人员工具中的所有数据,但图表无法显示。

  4. 我查看了各种主题,但我无法使其正常运作。

  5. 我的主要html文件的一部分

                        {% if objects %}
    
                        {% for obj in objects %}
                        <tr data-toggle="collapse" data-target="#{{obj.name}}" data-parent="#myGroup" class="accordion-toggle">
                        <!--tr>-->
                            <td style="border:0;"><img src='{{STATIC_URL}}/static/images/{{obj.name}}.png' class="infostockIcon"></td>
    
                            {% if obj.risk == "high" %}
    
                            {% if obj.dpr == "high" %}
                            <td class="tablerisk"><strong> * {{obj.name}} </strong></td>
                            {% else %}
                            <td class="tablerisk"><strong> {{obj.name}} </strong></td>
                            {% endif %}
    
                            <td class="tablerisk"> {{obj.stock_price}} </td>
                            <td class="tablerisk" style="color: black;"> {{obj.option_strategy}} </td>
                            <td class="tablerisk" style="color: black;"> {{obj.whiz_strategy}} </td>
                            <td class="tablerisk"> {{obj.strike_price}} </td>
                            <td class="tablerisk"> {{obj.expiry_date}} </td>
                            <td class="tablerisk"> {{obj.premium}} </td>
                            <td class="tablerisk"> {{obj.roi}} </td>
    
                            {% else %}
    
                            {% if obj.dpr == "high" %}
                            <td><strong> * {{obj.name}} </strong></td>
                            {% else %}
                            <td><strong> {{obj.name}} </strong></td>
                            {% endif %}
    
                            <td> {{obj.stock_price}} </td>
                            <td> {{obj.option_strategy}} </td>
                            <td> {{obj.whiz_strategy}} </td>
                            <td> {{obj.strike_price}} </td>
                            <td> {{obj.expiry_date}} </td>
                            <td> {{obj.premium}} </td>
                            <td> {{obj.roi}} </td>
                            {% endif %}
                            <td style="border:0;"><span class="caret black"></span></th></td>
    
                        </tr>
    
                        <tr>
                            <td style="border: 0;padding: 0 !important;"></td>
                            <td colspan="8" style="padding: 0 !important; border: none;">
                                <div class="accordion-body collapse" id="{{obj.name}}">
    
                                    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                                        <li data-toggle="tab" class="active">
                                            <a href="#{{obj.name}}monthseason" data-toggle="tab">Monthly Seasonality</a>
                                        </li>
                                        <li data-toggle="tab">
                                            <a href="#{{obj.name}}weekseason" data-toggle="tab">Weekly Seasonality</a>
                                        </li>
                                        <li data-toggle="tab">
                                            <a href="#{{obj.name}}dividend" data-toggle="tab">Dividend</a>
                                        </li>
                                        <li data-toggle="tab">
                                            <a href="#{{obj.name}}data" data-toggle="tab">{{obj.name}} Info</a>
                                        </li>
                                    </ul>
    
    
                                    <div id="my-tab-content" class="tab-content">
                                        <div class="tab-pane active" id="{{obj.name}}monthseason">
                                            <div class="row">
                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                    <h4>Monthly Seasonality<img src='{{STATIC_URL}}/static/info.png'  class="infoIcon" style="float: none; right: 0px; margin-left: 5px" /></h4>
                                                    <div id="gchart_div">
                                                        {{ obj.monthly_chart.as_html}}
                                                    </div>
                                                </div>  
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="{{obj.name}}weekseason">
                                            <div class="row">
                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                    <h4>Weekly Seasonality<img src='{{STATIC_URL}}/static/info.png'  class="infoIcon" style="float: none; right: 0px; margin-left: 5px"/></h4>
    
                                                    {{ obj.weekly_chart.as_html}}
    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane" id="{{obj.name}}dividend">
                                            <!--div style="padding-left: 2%;" >-->
                                            <div class="row">
    
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >TTM Dividend Yield:</label>
                                                        <label >{{obj.ttm_dividend_yield}}</label>
                                                    </div>
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >Ex-Dividend Date:</label>
                                                        <label >{{obj.ex_div}}</label>
                                                    </div>
                                            </div>
                                            <!--/div>-->
                                            <div class="row">
                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                    <h4>Dividend Yield<img src='{{STATIC_URL}}/static/info.png'  class="infoIcon" style="float: none; right: 0px; margin-left: 5px"/></h4>
    
                                                    {{obj.div_yearly_chart.as_html}}
    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane alignRight" id="{{obj.name}}data">
                                            <div style="padding-left: 2%;" >
                                                <div class="row">
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >Sector:</label>
                                                        <label >{{obj.sector}}</label>
                                                    </div>
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >Industry:</label>
                                                        <label >{{obj.industry}}</label>
                                                    </div>
                                                </div>
                                                <div class="row">
    
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >Earning Date:</label>
                                                        <label >{{obj.earnings_date}}</label>
                                                    </div>
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >Ex-Dividend Date:</label>
                                                        <label >{{obj.ex_div}}</label>
                                                    </div>
                                                </div>
    
                                                <div class="row">
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >52 Week Range:</label>
                                                        <label >{{obj.year_range}}</label>
                                                    </div>
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >5 Year Low:</label>
                                                        <label >{{obj.five_year_low}}</label>
                                                    </div>
                                                </div>
                                                <div class="row">
    
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >DPR:</label>
                                                        <label >{{obj.dpr_value}}</label>
                                                    </div>
                                                    <div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
                                                        <label >Latest News:</label>
                                                        <a href={{obj.url}}>Seeking Alpha</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <br>
                                        </div>
                                    </div>
    
                                </div>
                            </td>
                        </tr>
    
  6. 我的ajax电话:   `var $ myGroup = $(&#39; #myGroup&#39;);   $ myGroup.on(&#39; show.bs.collapse&#39;,&#39; .collapse&#39;,function(){   $ myGroup.find(&#39; .collapse.in&#39;)崩溃(&#39;隐藏&#39;)。   });

            $('#tabs li a').click(function (e) {
                $('#tabs li a.active').removeClass('active');
                $(this).parent('li a').addClass('active');
            });
    
            $("#loadprofit").on("click", function(e)
            {
            //alert("asdas");
            e.preventDefault();
            var selectedOption = $("#strategy").val();
            var selectedDate = $("#strategy2").val();
            csrf_token = "{{ csrf_token }}";
            $.ajax({
                method: "POST",
                url: window.location.href,
                data: { selected_option: selectedOption,selected_date:selectedDate,csrfmiddlewaretoken: csrf_token },
            })
            .done(function( msg )
            {
                console.log(msg);
                $("#sct tbody").html(msg);
            });
        });
    </script>
    {% endblock %}
    

    `

  7. 当用户点击按钮时,整个表格都会更新。然后它调用views.py并使用最新值更新表。但{{obj.monthly_chart.as_html}}未加载,虽然我可以看到整个图表绘制功能,但数据构成了开发人员工具,但它显示为空白
  8. 非常感谢任何帮助。

0 个答案:

没有答案