Highcharts 图表仅在窗口调整大小时正确显示答案

【问题标题】：Highcharts Graph displays correctly ONLY on Window ResizeHighcharts 图表仅在窗口调整大小时正确显示
【发布时间】：2014-01-30 13:21:42
【问题描述】：

在我的rails应用程序中，我有一个highcharts图，它显示在模态对话框中，当模态对话框加载时；该图占据了整个框（不正确），但是当我调整窗口大小时；图表调整到适当的大小，它应该是这样的。

这是图表首次加载时的样子 --> [Link][1]（错误）这是调整窗口大小后图表的样子 --> [Link][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);
      });

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

【问题讨论】：

您的图片无效。你能在 jsFiddle 上重新创建问题吗？它应该从 Highcharts 3.0.0 开始修复。
嘿@PawełFus，这里有两个链接到小抓斗：grab.by/tY80 和grab.by/tY86，如果你看到了请告诉我，谢谢。而且我不确定我是否可以在 Jsfiddle 中重新创建该问题..对不起
你确定你有最新版本的 Highcharts 吗？请尝试 3.0.9。请参阅：jsfiddle.net/3bQne/881 - 简单的示例可以正常工作。
嘿，实际上我现在可以使用它了.. 我已经编辑了我的初始帖子！ :)

标签： javascript ruby-on-rails highcharts window-resize

【解决方案1】：

这是我为使其响应式工作所做的：

#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方法中添加了。

谢谢！

【讨论】：

【解决方案2】：

与其任意等待200ms，不如将图表初始化放在window加载就足够了：

$(window).load(initializeChart);

当文档准备好时，$('#contain').width() 可能没有您期望的值，但它们都应该在 window 加载时设置。

【讨论】：