javascript - ChartKick 图表不断加载并与页面 Rails 上的其他图表混合

Question

好吧，这听起来很奇怪，但它确实发生在我构建的应用程序中。

我完全不知道为什么会这样，下面是对问题的描述和我的代码示例。

在我的 users/show.html.erb 上，我有一些图表是通过局部渲染在 show.html.erb 上的导航选项卡中的。这工作正常，图表在每个选项卡中呈现它们应该做的。但是还有这一行图表也是从一个名为 _dashboard_part.html.erb 的部分呈现的。如果我将仪表板部分注释掉，所有其他图表都工作正常，但如果我取消对 dashboard_part 部分的注释，前面提到的图表将花费极长的时间来加载，其中一些正在挤压并出现在 _dashboard_part.html.erb 中的图表中部分。

因此，这些图形和局部图肯定存在某种类型的冲突，但我一直无法弄清楚。所以我真的需要帮助来解决这个问题。

_electro_part.html.erb 部分(见下文)中的图表似乎与 _dashboard_part.html.erb 部分相冲突。

编辑

好的，当我检查 user/show.html.erb 时，我注意到当我点击 Electro 选项卡时，_dashboard_part.html.erb< 中最后 3 个图表的这一部分 从例如 data-highcharts-chart="4" 更改为 data-highcharts-chart="42"。我不知道为什么当我点击 electro 选项卡时这 3 个图表会发生变化，但这一定与这种奇怪的混淆有关。

这是我的 users/show.html.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>

这里是 users/show.js.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('')
} 

这是 _dashboard_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>        

然后这里是_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&sup2;</p>
                    <h2><%= number_with_precision(@electro_total_per_m2.to_f, precision: 2)%><small class="user-eining"> -kwst/m&sup2;</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>                

编辑

这是 pages/partial/_new_electro_part.html.erb

<div class="well">
<%= form_for @electro, html: {class: 'form-horizontal'} do |f| %>

<div class="control-group"> 
    <%= f.label :Dagsetning, class: 'control-label' %><br>
        <div class="controls">
            <%= f.date_select :date %>
        </div>
</div>  

  <div class="control-group">   
    <%= f.label :Bygging, class: 'control-label' %><br>
        <div class="controls">
            <%= f.text_field :building_name %>
      </div>
</div>  

<div class="control-group"> 
    <%= f.label :Rafmagn_kwst, class: 'control-label' %><br>
        <div class="controls">
            <%= f.number_field :electricity_kwst %>
        </div>
  </div>    

  <div class="control-group">   
    <%= f.label :Rafmagn_kostnaður, class: 'control-label' %><br>
        <div class="controls">
            <%= f.number_field :electricity_cost %>
        </div>
  </div>    




  <div class="control-group">
    <div class="controls">
      <%= f.submit class: 'btn btn-xs btn-warning' %>
    </div>  
  </div>

  <% end %>
   <%= link_to 'Skoða allar færslur', electros_path %>  
  </div>

Answer 1

该死。我花了 2 天时间才知道发生了什么。我遇到了同样的问题。

简短:您必须自行设置图表的 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

我希望这个答案对你来说还不算太晚。