我一直在使用django graphos并且它工作正常,直到我意识到当我通过ajax而不是页面刷新更新我的表时不绘制图表。让我进一步描述这个问题。
首次加载我的页面时,使用{{chart.as_html}}正确加载所有图表。顺便说一下,我正在使用django。
此图表显示在表格中。
但是当用户从下拉列表中选择不同的值并单击重新加载时,我的代码将仅通过ajax而不是整页刷新来更新表。不幸的是,当表格更新时,不会显示包含新数据的图表。它只是空白。我可以看到开发人员工具中的所有数据,但图表无法显示。
我查看了各种主题,但我无法使其正常运作。
我的主要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>
我的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 %}
`
非常感谢任何帮助。