こちらの指示に従って(コード サンプルのタグの問題を修正して)、アプリに円グラフを実装しようとしています。最初のページを読み込みますが、円グラフが部分的に読み込まれません (html.erb ファイルに作成します)。現在、多くのことがハードコードされているため、たとえばチャート タイプなどはまだコントローラーに戻されていません。
誰かが私が失敗した場所を指摘するのを手伝ってもらえますか?
コントローラ:
def dynamic_chart
@chart_types = ChartType.all
@user_visible_models = ["Asset","Asset Manufacturer","Asset Model", "Map","Campus","Tag","Room", "Room Monitor"]
@date_ranges = ["Day", "Week", "Month"]
end
def gen_chart
@rooms = Array.new
Room.all.each do |room|
@rooms << [room.name, room.asset_count]
end
@chart = LazyHighCharts::HighChart.new('pie') do |f|
f.chart({:defaultSeriesType=>"pie" , :margin=> [50, 200, 60, 170]} )
series = {
:type=> 'pie',
:name=> 'Asset by Rooms',
:data=> @rooms
}
f.series(series)
f.options[:title][:text] = "THA PIE"
f.legend(:layout=> 'vertical',:style=> {:left=> 'auto', :bottom=> 'auto',:right=> '50px',:top=> '100px'})
f.plot_options(:pie=>{
:allowPointSelect=>true,
:cursor=>"pointer" ,
:dataLabels=>{
:enabled=>true,
:color=>"white",
:style=>{
:font=>"13px Trebuchet MS, Verdana, sans-serif"
}
}
})
end
dynamic_chart.html.erb
<% javascript 'dynamic_chart' %>
<div id="graph_controls">
<%= form_tag('activate_reports/dynamic_chart', :class => "well form-inline") do %>
<%= text_field_tag(:name, nil, :class => "input-small", :placeholder => "Report Name") %>
<%= collection_select(:activate_report, :chart_type_id, @chart_types, :id, :name, :prompt => "Select chart") %>
<%= label_tag :x_axis, "X:", :class => "control-label" %>
<%= select :x_axis, nil, @user_visible_models, :prompt => true %>
<%= label_tag :y_axis, "Y:", :class => "control-label" %>
<%= select :y_axis, nil, @user_visible_models, :prompt => true %>
<%= select :date_range, nil, @date_ranges, :prompt => "Select a day" %>
<%= link_to("Chart!", "#", :remote => true, :class => "btn", :onclick => 'gen_chart()') %>
<% end %>
</div>
<div id="chart_area"></div>
_gen_chart.html.erb 部分:
<%= high_chart("chart_area", @chart) %>
新しいチャートを開始するために使用される gen_chart js 関数
function gen_chart(){
jQuery.ajax({
url: "/activate_reports/gen_chart",
type: "GET",
data: {},
dataType: "html"
});
}