关于javascript：Highcharts图形仅在窗口调整大小时正确显示

Highcharts Graph displays correctly ONLY on Window Resize

在我的Rails应用程序中，我有一个highcharts图，它显示在模式对话框中以及加载模式对话框时；该图占据了整个盒子(不正确)，但是当我调整窗口大小时；图形将调整为它应有的适当大小。

这是首次加载图形时的外观-> [Link] [1](错误)
这是调整窗口大小后图形的外观-> [Link] [2](正确)

如何获取它，以便在第一次加载图形时正确显示图形，而不是在调整窗口大小之后正确显示图形？

这是页面那部分的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

- 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

我真的不知道发生了什么！！！

大家好，我弄清楚了，这就是我要解决的问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

#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);
});

如果您有任何疑问，请告诉我