javascript - highcharts redraw and reflow not working - Stack Overflow

admin管理员组

文章数量:1279242

I am trying to build a dynamic page that has any number between 1-4 graphs on it that can be added or removed as needed but I have run into a huge problem and I can't seem to get the graph to resize after resizing the containing div. for example if I add a graph on the page it will be width 800, then click a button to add another graph it should resize to be 400 a piece but I cannot make it happen. As a very simplistic model I have the following

$(function () {
  $('#container').highcharts({
      chart: {
          type: 'line',
          width: 300
      },
      title: {
          text: 'Width is set to 300px'
      },

      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },

      series: [{
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }]
  });
  $('#resize').click(function() {
      $('#container').attr('style', 'width: 800px');
      $("#container").highcharts().reflow();
      console.log($('#container').width());
  });
});

now when that is run it will log 800 to the dev tools window in chrome but the graph will not resize. I have tried both redraw() and reflow() as suggested in the documentation for highcharts. I even setup a really quick demo on jsfiddle here, / can anyone please help me. It is kind of important. Thank you in advance for the help.

I am trying to build a dynamic page that has any number between 1-4 graphs on it that can be added or removed as needed but I have run into a huge problem and I can't seem to get the graph to resize after resizing the containing div. for example if I add a graph on the page it will be width 800, then click a button to add another graph it should resize to be 400 a piece but I cannot make it happen. As a very simplistic model I have the following

$(function () {
  $('#container').highcharts({
      chart: {
          type: 'line',
          width: 300
      },
      title: {
          text: 'Width is set to 300px'
      },

      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },

      series: [{
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }]
  });
  $('#resize').click(function() {
      $('#container').attr('style', 'width: 800px');
      $("#container").highcharts().reflow();
      console.log($('#container').width());
  });
});

now when that is run it will log 800 to the dev tools window in chrome but the graph will not resize. I have tried both redraw() and reflow() as suggested in the documentation for highcharts. I even setup a really quick demo on jsfiddle here, http://jsfiddle/7cbsV/ can anyone please help me. It is kind of important. Thank you in advance for the help.

• javascript
• jquery
• html
• css
• highcharts

Share Improve this question Follow asked May 14, 2014 at 3:10 user3634895user3634895 6311 gold badge11 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

How about using simple chart.setSize(w,h)? See docs.

$("#container").highcharts().setSize(800, height);

Just remove the width of the chart from

$('#container').highcharts({
  chart: {
      type: 'line',
      width: 300
  },

so that it is like this

$('#container').highcharts({
  chart: {
      type: 'line'
  },

and set the container width to 300 like this

#container {
   width: 300px;
}

then just resize the container div as you are already doing. the chart will resize according to the width of the container div.

hope this helps.

本文标签： javascripthighcharts redraw and reflow not workingStack Overflow