使用懶惰高圖表在一個頁面上顯示多個圖表

Question

我目前正在Rails應用程序上編寫一個紅寶石，我使用懶惰的高圖表寶石來顯示一些圖表。但是，我無法在一個頁面上顯示兩張圖。看起來後者圖覆蓋了第一個圖，因此第二個圖是唯一顯示的圖。如果單獨放置這兩個圖形都會顯示。如何在一個頁面上顯示這兩個圖形？

這是我的控制器上

@performance_chart = LazyHighCharts::HighChart.new('graph') do |f| 
    f.title(:text => "Team Performance") 
    f.xAxis(:categories => @x_axis) 

    f.series(:name => @team.name, :yAxis => 0, :data => @performance) 
    f.series(:name => "Top Scores for " + @team.division.name.capitalize[0...-1] + " Division", :yAxis => 0, :data => @top_scores) 
    f.series(:name => "Averaged Scores for "+ @team.division.name.capitalize[0...-1] + " Division", :yAxis => 0, :data => @average_scores) 
    f.yAxis [ 
    {:title => {:text => "Quiz Scores", :margin => 70} } 
    ] 
    f.chart({:defaultSeriesType=>"line"}) 
end 

#bar graph for individual team members 
@member_chart = LazyHighCharts::HighChart.new('column') do |f| 
    f.title(:text => "Population vs GDP For 5 Big Countries [2009]") 
    f.xAxis(:categories => ["United States", "Japan", "China", "Germany", "France"]) 
    f.series(:name => "GDP in Billions", :yAxis => 0, :data => [14119, 5068, 4985, 3339, 2656]) 
    f.series(:name => "Population in Millions", :yAxis => 1, :data => [310, 127, 1340, 81, 65]) 

    f.yAxis [ 
    {:title => {:text => "GDP in Billions", :margin => 70} }, 
    {:title => {:text => "Population in Millions"}, :opposite => true}, 
    ] 

    f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical',) 
    f.chart({:defaultSeriesType=>"column"}) 
end 

這是對我的看法

<div = class"row"> 
    <div class="card"> 
     <%= high_chart("some_id", @performance_chart) %> 
    </div> 
</div> 

<div class="row"> 
    <div class="card"> 
     <%= high_chart("some_id", @member_chart) %> 
    </div> 
</div> 

Answer 1

我發現HighChart.new（）參加了三個參數，其中之一是用來創建一個div標籤。

def high_chart(placeholder, object, &block) 
    object.html_options.merge!({:id => placeholder}) 
    object.options[:chart][:renderTo] = placeholder 
    high_graph(placeholder, object, &block).concat(content_tag("div", "", object.html_options)) 
end 

所以我所要做的只是改變我從控制器調用的顯示圖形的ID的名稱。如果沒有，它會找到具有相同ID的div標籤（在我的例子中是我創建的第一個圖形），並替換先前顯示的圖形。要解決這個問題，我改變

<%= high_chart("some_id", @member_chart) %> 

到

<%= high_chart("some_other_id", @member_chart) %>