在我的rails应用程序中，我有一个highcharts图形，它显示在一个模态对话框中，当加载模态对话框时;图形占据整个框（不正确），但是当我调整窗口大小时;图形调整到适当的大小，就像应该的那样。
这是首次加载时图表的外观 - ＆gt; [链接] [1]（错误） 这是图表在调整窗口大小后的样子 - ＆gt; [链接] [2]（正确）
如何获取图表以便在第一次加载时正确显示图表，而不是在窗口调整大小后显示？
以下是该部分页面的代码：
- player_url = URI.encode('http://'+request.host_with_port + player.url)
- player_title = "AmericanSoccerNow: #{player.title}"
- player_description = player.dek
- highchart_data = @asns.map { |asn| [asn.asn_month.try(:strftime, '%b/%y'), asn.player_rank(player)] }
- highchart_xaxis_data = @asns.collect { |asn| asn.asn_month.try(:strftime, '%b-%y')}
.detail
/ :javascript
/ alert( 'You are running jQuery version: ' + $.fn.jquery );
.left
- if player.hero_image and player.hero_image.attached
= image_tag player.hero_image.attached.url, :height => "auto", :width => "100%"
%span.imageCaption
= player.hero_image.credit.try(:html_safe)
.block
#contain{:style => "width: 100%; height: auto; "}
:javascript
$(function() {
$('#contain').highcharts({
chart: {
spacingLeft: 0
},
title: {
text: 'ASN 100 Ranking Tracker',
style: {
color: 'black',
font: 'normal 12px "Alfa Slab One", Helvetica, Arial, sans-serif',
}
},
xAxis: {
categories: #{raw highchart_xaxis_data.to_json},
labels: {
lineColor: 'red',
lineWidth: 2,
enabled: true,
style: {
color: 'black',
font: 'normal 10px "Arial", sans-serif',
}
},
},
yAxis: {
reversed: true,
opposite: true,
gridLineColor: 'black',
lineColor: 'black',
lineWidth: 1,
title: {
text: '',
style: {
color: 'red',
fontWeight: 'bold'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false,
},
series: [{
showInLegend: false,
name: "#{player.title}'s Rank",
color: 'red',
data: #{raw highchart_data.to_json}
}]
});
});
- else
= image_tag "http://placehold.it/200x240", :height => 240, :width => 250
- unless player.relatables.external_videos.empty?
- player.relatables.external_videos.each do |video|
.block
= image_tag video.preview_image, :class => 'video_preview', :width => "100%", :height => "auto", :data => {'youtube-id' => video.youtube_id, :player_id => player.slug, :player_rank => @rank}
.video_embed{:style => 'display:none;', :data => {'youtube-id' => video.youtube_id}}
= video.movie_embed.html_safe
%p.meta
= video.title
#secretSocial
%ul.socialIcons
= render '/shared/player_addthis', :url => player_url, :title => player_title, :description => player_description, :show_print => true
.right.arct
%h2.player
- unless @rank.nil?
%span.red
= "##{@rank}"
= player.title
%ul
%li
%span
DOB
= player.birth_date.try(:strftime, '%B %e, %Y')
%li
%span
Age
= player.age
- if player.birth_place.present?
%li
%span
Place of birth
= player.birth_place
%li
%span POSITION
= player.human_readable_position
%li
%span HEIGHT
= display_feet(player.height)
%li
%span WEIGHT
= player.weight
%li
%span U.S. CAPS
= player.us_caps
- if player.club.present?
%li
%span CLUB
= player.club.name
- if player.twitter_handle.present?
%li
%span
TWITTER
= link_to "@#{player.twitter_handle}", "http://twitter.com/#{player.twitter_handle}", :target => '_blank'
= "(#{humanize_twitter_followers(player.twitter_followers)} followers)"
/ - @asns.each do |asn|
/ - if rank = asn.player_rank(player)
/ - if rank > 100
/ - ranking = 'unranked in the top 100'
/ - else
/ - ranking = "ranked #{rank}"
/ - else
/ - ranking = 'unranked'
/ %li
/ %span= "#{asn.asn_month.strftime('%b %Y')}: #{ranking}"
- if @current_rank or @previous_rank
%li
%span Current ASN 100 Rank
= (@current_rank.nil? or @current_rank > 100) ? "Unranked" : @current_rank
%li
%span Previous ASN 100 Rank
= (@previous_rank.nil? or @previous_rank > 100) ? "Unranked" : @previous_rank
- if player.youth_experience.present?
%li
%span Youth Experience
= player.youth_experience
- if player.contract_status.present?
%li
%span Contract Status
= player.contract_status
- if player.questionnaire.present?
%li
%span ASN QUESTIONNAIRE
= link_to "Read now", player.questionnaire.url
= player.body.try(:html_safe)
- unless player.relatables.external_links.empty?
%h4 Noteworthy Reads
- player.relatables.external_links.each do |external_link|
= link_to external_link.title, external_link.url, :target => '_blank'
%br
.clear
嘿伙计们我明白了，这就是我为解决它而做的事情：
#contain{:style => "width: 100%; height: auto; "}
:javascript
$(function() {
var initializeChart = function() {
$('#contain').highcharts({
chart: {
spacingLeft: 0,
events: {
load: function() {
$(window).resize();
}
}
},
title: {
text: 'ASN 100 Ranking Tracker',
style: {
color: 'black',
font: 'normal 12px "Alfa Slab One", Helvetica, Arial, sans-serif',
}
},
xAxis: {
categories: #{raw highchart_xaxis_data.to_json},
labels: {
lineColor: 'red',
lineWidth: 2,
enabled: true,
style: {
color: 'black',
font: 'normal 10px "Arial", sans-serif',
}
},
},
yAxis: {
reversed: true,
opposite: true,
gridLineColor: 'black',
lineColor: 'black',
lineWidth: 1,
title: {
text: '',
style: {
color: 'red',
fontWeight: 'bold'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false,
},
series: [{
showInLegend: false,
name: "#{player.title}'s Rank",
color: 'red',
data: #{raw highchart_data.to_json}
}]
})
};
window.setTimeout(initializeChart, 200);
});
如果您有疑问，请与我们联系
答案 0 :(得分：3)
这是我为响应性地开展工作所做的工作：
#contain{:style => "width: 100%; height: auto; "}
:javascript
$(function() {
var initializeChart = function() {
$('#contain').highcharts({
chart: {
spacingLeft: 0,
events: {
load: function() {
$(window).resize();
}
}
},
title: {
text: 'ASN 100 Ranking Tracker',
style: {
color: 'black',
font: 'normal 12px "Alfa Slab One", Helvetica, Arial, sans-serif',
}
},
xAxis: {
categories: #{raw highchart_xaxis_data.to_json},
labels: {
lineColor: 'red',
lineWidth: 2,
enabled: true,
style: {
color: 'black',
font: 'normal 10px "Arial", sans-serif',
}
},
},
yAxis: {
reversed: true,
opposite: true,
gridLineColor: 'black',
lineColor: 'black',
lineWidth: 1,
title: {
text: '',
style: {
color: 'red',
fontWeight: 'bold'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false,
},
series: [{
showInLegend: false,
name: "#{player.title}'s Rank",
color: 'red',
data: #{raw highchart_data.to_json}
}]
})
};
window.setTimeout(initializeChart, 200);
});
我在setTimeout方法中添加了，我还在window.resize方法中添加了。
谢谢！
答案 1 :(得分：2)
而不是任意等待200ms，将图表初始化放在window负载上就足够了：
$(window).load(initializeChart);
当文档准备就绪时，$('#contain').width()可能没有您期望的值，但它们都应该在window次加载时设置。