使用惰性高图表在一页上显示多个图表答案

【问题标题】：Displaying multiple graphs on one page using lazy high charts使用惰性高图表在一页上显示多个图表
【发布时间】：2015-06-05 15:43:11
【问题描述】：

我目前正在编写一个 ruby on rails 应用程序，我正在使用惰性高图表 gem 来显示一些图表。但是，我无法在一页上显示两个图表。后一个图似乎覆盖了第一个图，因此第二个图是唯一显示的图。如果分开放置，两个图表都会显示。如何在一页上显示两个图表？

这是我的控制器上的内容

@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>

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 highcharts lazy-high-charts

【解决方案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) %>

【讨论】：