Highcharts：通过缩小屏幕，图表不会调整尺寸 [英] Highcharts: Chart does not resize properly by making the screen smaller

问题描述

 < div 
我使用HighCharts 4.0.4，我有一个带有自定义图例的图表。类= 包装 > 
< div class =element> 
< div id =chart>< / div> 
< / div> 
< div class =legend> 
 Legend 
< / div> 
< / div> 
  

CSS 看起来像这样。 wrapper 是一个表，所以我可以在图例中使用 table-cell a vertical-align：middle 。我想同时拥有包装的宽度的50％。

  .wrapper {
 display：table; 
宽度：100％; 
} 
 
 .element {
 display：table-cell; 
宽度：50％; 
} 
 
 .legend {
 display：table-cell; 
宽度：50％; 
 vertical-align：middle; 
} 
 
 #chart {
 width：100％; 
} 
  

问题是，我创建了一个JSFiddle 这里，如果输出/结果窗口很小，则运行代码，我看到50％：50％。调整输出窗口大小，一切正常，50％：50％没问题，但输出窗口变小了，图表没有正确调整大小。

我看到一些使用 $（window）.resize（）; 的解决方案。在我的情况下，我尝试使用 outerHeight ，但只有当我增大屏幕大小时，值才会变化。所以我找到了这样的解决方案：
$ b $ $ $ $ $'''$'$。$（'＃chart'）。highcharts（）.setSize（
$（。wrapper）。width（）/ 2，$（'＃chart'）。highcharts（）。height，doAnimation = true
）;

但是，是否还有一个解决方案不需要使用JavaScript，只需要HTML和CSS？ p>

解决方案

这应该只用 CSS 来完成......没有调整大小的函数。
$ b

尝试添加 position：absolute 到您的图表css属性

对于 #chart 来说，strong> css 看起来像这样：

  #chart {
 display：table-cell; 
位置：绝对; 
宽度：50％; 
} 
  

我认为这是您想要的效果。

检查我的小提琴

注意：我删除了所有调整大小 Javascript

---

跟进：

如果您需要在窗口上调整Highcharts的大小并调整动画大小，可以使用这个语法。

  $（window）.resize（function（）{
 height = $（window）.height （）
 width = $（window）.width（）/ 2 
 $（＃chart）。highcharts（）.setSize（width，height，doAnimation = true）; 
} ）; 
  

我认为这更像是使用Highchart setSize 使用动画代替 CSS 的方法）
$ b

小提琴

I am using HighCharts 4.0.4 and I have a chart with a custom legend in this way:

<div class="wrapper">
    <div class="element">
        <div id="chart"></div>
    </div>
    <div class="legend">
        Legend
    </div>
</div>

The CSS looks like this. The wrapper is a table, so that I can use in the legend with table-cell a vertical-align: middle. I want to have both 50% of the width of the wrapper.

.wrapper {
  display: table;
  width: 100%;
}

.element {
  display: table-cell;
  width: 50%;
}

.legend {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}

#chart {
  width: 100%;
}

The problem is, I created a JSFiddle here, "running" the code if the output/result window is small, I see the 50%:50%. Resizing the output window and make it larger, everything is okay, the 50%:50% is okay, but making the output window smaller, the chart does not resize properly.

I saw some solutions with $(window).resize();. In my case, I tried to use the outerHeight, but the values only changes if I make the screen size bigger. So I found this solution which works:

$('#chart').highcharts().setSize(
  $(".wrapper").width() / 2, $('#chart').highcharts().height, doAnimation = true
);

But is there also a solution which does not need to use JavaScript, only HTML and CSS?

解决方案

This should be done with just CSS... no resizing functions.

try adding position:absolute to your chart css property

The new css for #chart would look like this:

#chart {
    display: table-cell;
    position:absolute;
    width:50%;
}

I think this is the effect you want.

Check my Fiddle

note: I removed all resizing Javascript

---

Follow Up:

If you need to resize Highcharts on window resize with animation, you can do it with this syntax.

$(window).resize(function() {
    height = $(window).height()
    width = $(window).width() / 2
    $("#chart").highcharts().setSize(width, height, doAnimation = true);
});

I think this is more what you wanted using the Highchart setSize method with animation instead of CSS)

Fiddle

这篇关于Highcharts：通过缩小屏幕，图表不会调整尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！