Question

我正在尝试构建一个动态页面，其上有1-4个图形之间的任意数字，可以根据需要添加或删除但我遇到了一个巨大的问题，我似乎无法获得图表调整包含div后调整大小。例如，如果我在页面上添加一个图形，它将是宽度800，然后单击一个按钮添加另一个图形，它应该调整为400一块，但我不能实现它。作为一个非常简单的模型，我有以下

$(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());
  });
});

现在，当它运行时，它会将800记录到chrome中的开发工具窗口，但图表不会调整大小。我已按照highcharts文档中的建议尝试了redraw（）和reflow（）。我甚至在这里设置了一个关于jsfiddle的快速演示，http://jsfiddle.net/7cbsV/ 谁能帮帮我吗。这很重要。提前感谢您的帮助。

Answer 1

如何使用简单的chart.setSize(w,h)？请参阅docs。

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

Answer 2

只需从

中删除图表的宽度即可

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

所以就像这样

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

并将容器宽度设置为300

#container {
   width: 300px;
}

然后就像你正在做的那样调整容器div的大小。图表将根据容器div的宽度调整大小。

希望这会有所帮助。

highcharts重绘和回流不工作

2 个答案: