ChartKick Charts不断加载并与页面Rails上的其他图形混合
好的，这听起来很奇怪，但它确实发生在我正在构建的应用程序中。
我完全不知道为什么会发生这种情况，下面是问题的描述和我的代码示例。
在我的users / show.html.erb上，我在show.html.erb到partials的nav-tabs中渲染的图表很少。这工作正常，图表在每个标签中都会呈现出来。但是，这一行图表也是从一个名为_dashboard_part.html.erb的部分呈现的。如果我对仪表板进行局部评论，则所有其他图表都正常工作，但如果我取消注释dashboard_part partial，则前面提到的图表需要花费极大的时间来加载，其中一些图表正在挤压并出现在_dashboard_part.html.erb的图表中部分。
因此，某些类型的冲突必须与这些图形和部分冲突，但我无法弄明白。所以我真的需要帮助来解决这个问题。
_electro_part.html.erb partial（见下文）中的图表似乎与_dashboard_part.html.erb部分冲突。
修改
好的，当我检查user/show.html.erb时，我注意到当我点击Electro标签时，_dashboard_part.html.erb中最后3个图表的这一部分从例如data-highcharts-chart="4"更改为{{1} }}。我不知道为什么当我点击电子标签时这三个图表正在改变，但它必须与这个奇怪的混合有关。
这是我的users / show.html.erb的图形部分是部分渲染。
data-highcharts-chart="42"这是用户/ show.js.erb，以便标签顺利运行
<hr>
<%= render 'users/shared/dashboard_part' %> #This is the part were the conflict seems to be happening, it´s all good when I comment this part out
<hr>
<div class="container">
<ul role="tablist" id="category_tabs" class="nav nav-tabs">
<li role="presentation" class="active">
<%= link_to "Pappír", "#pappir_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab" %>
</li>
<li role="presentation" >
<%= link_to "Rafmagn", "#electro_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#electro', id: "electro_tab" %>
</li>
<li role="presentation" >
<%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab" %>
</li>
<li role="presentation" >
<%= link_to "Ræsting", "#cleaning_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#cleaning', id: "cleaning_tab" %>
</li>
</ul>
<div class="tab-content categories">
<div role="tabpanel" class="tab-pane fade in active" id="pappir">
<div class="pappir">
<%= render 'pages/partials/paper_part' %>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="electro">
<div class="electro">
<%= render 'pages/partials/electro_part' %> #This one seems to be conflicting with the _dashboard_part.html.erb
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="hwater">
<div class="hwater">
<%= render 'pages/partials/hwater_part' %>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="cleaning">
<div class="cleaning">
<%= render 'pages/partials/cleaning_part' %>
</div>
</div>
这是_dashboard_part.html.erb部分
if($("#category_tabs li:first-child").hasClass("active")) {
$(".pappir").html("<%= j render(partial: 'pages/partials/paper_part') %>")
$(".electro").html('')
$(".hwater").html('')
$(".cleaning").html('')
} else
if($("#category_tabs li:nth-child(2)").hasClass("active")) {
$(".electro").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>")
$(".hwater").html('')
$(".cleaning").html('')
$(".pappir").html('')
} else
if($("#category_tabs li:nth-child(3)").hasClass("active")) {
$(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>")
$(".cleaning").html('')
$(".pappir").html('')
$(".electro").html('')
} else
if($("#category_tabs li:nth-child(4)").hasClass("active")) {
$(".cleaning").html("<%= escape_javascript(render 'pages/partials/cleaning_part').html_safe %>")
$(".pappir").html('')
$(".electro").html('')
$(".hwater").html('')
}
然后这里是_electro_part.html.erb
中的代码<div class="row">
<!-- Pappirs graf -->
<div class="col-md-2 chart-box">
<h4> Pappír </h4>
<%= column_chart [
{name: "Paper #{current_user.profile.name}", data: current_user.papers.group_by_year(:created_at, format:"%Y").sum(:paper_weight)},
{name: "Paper all Avr", data: Paper.group_by_year(:created_at, format:"%Y").average(:paper_weight)}], { stacked: true, height: "250px", xtitle: "Pappírsmagn", ytitle: "Kg/Pappír"} %>
<ul class="chart-box-nav">
<li><p> <%= link_to "Setja Markmið", '#' %> |</p></li>
<li><p> <%= link_to "Skrá Pappír", '#pappir'%> |</p></li>
<li><p> <%= link_to "Skoða nánar", '#pappir'%> </p></li>
</ul>
</div>
<!-- Rafmagns graf -->
<div class="col-md-2 chart-box">
<h4> Rafmagn </h4>
<%= column_chart [
{name: "KWst notkun #{current_user.profile.name}", data: current_user.electros.group_by_year(:created_at, format:"%Y").sum(:electricity_kwst)},
{name: "Meðaltal allra notenda", data: Electro.group_by_year(:created_at, format:"%Y").average(:electricity_kwst)}], { stacked: true, height: "250px", xtitle: "Rafmagnsnotkun", ytitle: "kwst/Rafmagn"} %>
<ul class="chart-box-nav">
<li><p> <%= link_to "Setja Markmið", '#' %> |</p></li>
<li><p> <%= link_to "Skrá Rafmagn", '#rafmagn'%> |</p></li>
<li><p> <%= link_to "Skoða nánar", '#rafmagn'%> </p></li>
</ul>
</div>
<!-- Heitt vatn graf-->
<div class="col-md-2 chart-box">
<h4> Heitt vatn </h4>
<%= column_chart [
{name: "KWst notkun #{current_user.profile.name}", data: current_user.hwaters.group_by_year(:created_at, format:"%Y").sum(:hot_water_cubic_meter)},
{name: "Meðaltal allra notenda", data: Hwater.group_by_year(:created_at, format:"%Y").average(:hot_water_cubic_meter)}], { stacked: true, height: "250px", xtitle: "Heitt vatn", ytitle: "m3/Heitt vatn"} %>
<ul class="chart-box-nav">
<li><p> <%= link_to "Setja Markmið", '#' %> |</p></li>
<li><p> <%= link_to "Skrá Vatn", '#hwater'%> |</p></li>
<li><p> <%= link_to "Skoða nánar", '#hwater'%> </p></li>
</ul>
</div>
<!-- Ræstiefni graf -->
<div class="col-md-2 chart-box">
<h4> Ræstiefni </h4>
<%= column_chart [
{name: "Notkun Ræstiefna #{current_user.profile.name}", data: current_user.cleanings.group_by_year(:created_at, format:"%Y").sum(:cleaning_liter)},
{name: "þar af umhv.væn", data: current_user.cleanings.group_by_year(:created_at, format:"%Y").sum(:env_clean_ratio)}, { stacked: true, height: "250px", xtitle: "Ræstiefni", ytitle: "l/ræstiefni"},
{name: "Notkun Ræstiefna allir", data: Cleaning.group_by_year(:created_at, format:"%Y").average(:cleaning_liter)},
{name: "þar af umhv.væn", data: Cleaning.group_by_year(:created_at, format:"%Y").average(:env_clean_ratio)}], { stacked: true, height: "250px", xtitle: "Ræstiefni", ytitle: "l/ræstiefni"} %>
<ul class="chart-box-nav">
<li><p> <%= link_to "Setja Markmið", '#' %> |</p></li>
<li><p> <%= link_to "Skrá Ræstiefni", '#cleaning'%> |</p></li>
<li><p> <%= link_to "Skoða nánar", '#cleaning'%> </p></li>
</ul>
</div>
<!-- Flug co2 -->
<div class="col-md-2 chart-box">
<h4> Flug </h4>
<%= column_chart [
{name: "Co2 vegna flugferða ", data: current_user.transports.group_by_year(:created_at, format:"%Y").sum("transport_flight_km * 0.1722")},
{name: "Co2 Allir flug", data: Transport.group_by_year(:created_at, format:"%Y").average("transport_flight_km * 0.1722")}], { stacked: true, height: "250px", 'interpolateNulls':true, xtitle: "Co2 vegna Flugferða", ytitle: "Kg/Co2"} %>
<ul class="chart-box-nav">
<li><p> <%= link_to "Setja Markmið", '#' %> |</p></li>
<li><p> <%= link_to "Skrá Flug", '#flight'%> |</p></li>
<li><p> <%= link_to "Skoða nánar", '#flight'%> </p></li>
</ul>
</div>
<!-- Akstur co2 -->
<div class="col-md-2 chart-box">
<h4> Akstur </h4>
<%= column_chart [
{name: "Co2 vegna Akstur ", data: current_user.transports.group_by_year(:created_at, format:"%Y").sum("transport_flight_km * 0.1404")},
{name: "Co2 Allir Akstur", data: Transport.group_by_year(:created_at, format:"%Y").average("transport_flight_km * 0.1404")}], { stacked: true, height: "250px", 'interpolateNulls':true, xtitle: "Co2 vegna Aksturs", ytitle: "Kg/Co2"} %>
<ul class="chart-box-nav">
<li><p> <%= link_to "Setja Markmið", '#' %> |</p></li>
<li><p> <%= link_to "Skrá ferðir", '#travel'%> |</p></li>
<li><p> <%= link_to "Skoða nánar", '#travel'%> </p></li>
</ul>
</div>
修改
这是pages / partial / _new_electro_part.html.erb
<!-- KWst rafmagn/ mv.stöðug. -->
<div class="row">
<div class="col-md-8 mod-md-9 ">
<div class="col-md-2 user-box">
<p>Heildar kwst notkun</p>
<h2><%= @electro_total.to_f %><small class="user-eining"> - Kwst</small></h2>
</div>
<div class="col-md-2 user-box">
<p>Kwst á hvert stöðugildi</p>
<h2><%= @electro_total_per_capita %><small class="user-eining"> - Kwst</small></h2>
</div>
<div class="col-md-2 user-box">
<p>Kwst mv. hvern m²</p>
<h2><%= number_with_precision(@electro_total_per_m2.to_f, precision: 2)%><small class="user-eining"> -kwst/m²</small></h2>
</div>
</div>
<div class="col-md-4 clear-fix">
<%= render 'pages/partials/new_electro_part' %>
</div>
<div class="row">
<div class="col-md-12"> # these charts below seems to be somehow conflicting with the graphs in the _dashboard_part.html.erb
<div class="col-md-4 chart-box">
<%= line_chart [
{name: "Rafmagn #{current_user.profile.name}", data: current_user.electros.group_by_month(:updated_at).sum(:electricity_kwst)},
{name: "Rafmagnsnotkun Aðrir mt", data: Electro.group_by_month(:updated_at).average(:electricity_kwst)}], { stacked: true, height: "300px", xtitle: "Rafmagnsnotkun", ytitle: "Kwst/rafmagn"} %>
</div>
<div class="col-md-4 chart-box">
<%= column_chart [
{name: "Rafmagn #{current_user.profile.name}", data: current_user.electros.group(:building_name).sum(:electricity_kwst)}], { height: "300px", xtitle: "Rafmagnsnotkun/bygging", ytitle: "kwst/Rafmagn"} %>
</div>
<div class="col-md-4 chart-box">
<%= column_chart [
{name: "Rafmagns kostnaður #{current_user.profile.name}", data: current_user.electros.group_by_month(:date, format:"%B").sum(:electricity_kwst)},
{name: "Kostnaður Allir", data: Electro.group_by_month(:updated_at, format:"%B").average(:electricity_kwst)}], { stacked: true, height: "300px", xtitle: "Tímabil", ytitle: "Kostnaður/Rafmagn"} %>
</div>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：3)
该死。我花了两天时间才知道会发生什么。我遇到了同样的问题。
简短：您必须自行设置图表的ID。否则，ajax调用会使图表混乱。
如果您想知道到底发生了什么： https://github.com/ankane/chartkick/issues/193
所以做这样的事情：
<%= line_chart data,
id: random_charkick_id,
width: "200px", height: "80px" %>
并在你的帮手中：
def random_charkick_id
return 'chart-#'+(Random.rand(10000)).to_s
end
我希望这个答案对你来说还不算太晚。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？