javascript Highcharts：通过缩小屏幕无法正确调整图表大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25934907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts: Chart does not resize properly by making the screen smaller
提问by Tim
I am using HighCharts 4.0.4 and I have a chart with a custom legend in this way:
我正在使用 HighCharts 4.0.4，并且我有一个带有自定义图例的图表，如下所示：
<div class="wrapper">
<div class="element">
<div id="chart"></div>
</div>
<div class="legend">
Legend
</div>
</div>
The CSSlooks like this. The wrapperis a table, so that I can use in the legend with table-cella vertical-align: middle. I want to have both 50% of the width of the wrapper.
长CSS这样。该wrapper是一个表，让我能与传奇使用table-cell一个vertical-align: middle。我想同时拥有 .50% 的宽度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.
问题是，我在这里创建了一个 JSFiddle ，如果输出/结果窗口很小，则“运行”代码，我看到 50%:50%。调整输出窗口的大小并使其变大，一切正常，50%:50% 可以，但是使输出窗口变小，图表无法正确调整大小。
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:
我看到了一些解决方案$(window).resize();。就我而言，我尝试使用outerHeight，但只有当我将屏幕尺寸变大时，这些值才会改变。所以我找到了这个有效的解决方案：
$('#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?
但是是否还有一种不需要使用 JavaScript，只需要使用 HTML 和 CSS 的解决方案？
回答by Dave Alperovich
This should be done with just CSS... no resizing functions.
这应该只用CSS来完成……没有调整大小的功能。
try adding position:absoluteto your chart css property
尝试添加position:absolute到您的图表 css 属性
The new cssfor #chartwould look like this:
新的cssfor#chart看起来像这样：
#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
注意：我删除了所有调整大小的Javascript
Follow Up:
跟进：
If you need to resize Highcharts on window resize with animation, you can do it with this syntax.
如果您需要使用动画调整窗口大小时调整 Highcharts 的大小，您可以使用此语法来完成。
$(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 setSizemethod with animation instead of CSS)
我认为这更像是您想要使用setSize带有动画而不是CSS的 Highchart方法）
Fiddle
小提琴
回答by Sebastian Bochan
Instaed of table cell, why you cannot use default divs with the float:leftoption?
Instaed 的表格单元格，为什么不能使用带有float:left选项的默认 div ？
.wrapper {
float:left;
width: 100%;
}
.element {
float:left;
width: 50%;
}
#chart {
width: 100%;
}
.legend {
width: 50%;
float:left;
}
Example: http://jsfiddle.net/L9gubqvy/4/
回答by ma?o
Something like this? For me, use perfect.
像这样的东西？对我来说，使用完美。
CSS:
CSS：
.wrapper {
display: table;
width: 100%;
}
.element {
display: table-cell;
width: auto;
}
#chart {
width: 100%;
}
.legend {
display: table-cell;
width: 70px;
vertical-align: middle;
}
JS:
JS：
$('#chart').highcharts({
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]
}]
});
$(window).resize(function() {
$('#chart').highcharts({
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]
}]
});
});
回答by xpa1492
回答by ala8727
To be honest, I'm not quite sure why your chart was not resizing properly. But I have a way to do this without resizing in JS, assuming you can set the height of your wrapper div.
老实说，我不太确定为什么您的图表没有正确调整大小。但是我有一种方法可以在不调整 JS 大小的情况下做到这一点，假设您可以设置包装器 div 的高度。
First of all, you really shouldn't style your elements as tables if you are not using tabular data; I removed this from your CSS. Secondly, if you want your legend centered, it really should be within a separate element that is alongside the chart; each should be wrapped in the same kind of div. Normally I'd call this a column, but since you're already using .element, that works too. These will each be floated to the left, with a width of 50%, and a height of 100% (this is important, because we can't center the legend vertically unless its parent has a height defined.
首先，如果您不使用表格数据，您真的不应该将元素设置为表格；我从你的 CSS 中删除了它。其次，如果你想让你的图例居中，它真的应该在图表旁边的一个单独的元素中；每个都应该包裹在同一种 div 中。通常我会称它为一列，但由于您已经在使用 .element，这也适用。它们每个都将浮动到左侧，宽度为 50%，高度为 100%（这很重要，因为我们无法垂直居中图例，除非其父级定义了高度。
Then we have a child div inside the second .element, which is given the .legend class. Now we can more easily position it within that space. Since you don't know the height of the legend, you can't use a negative margin of 50%. Instead, you can use a CSS3 transform. It looks like this:
然后我们在第二个 .element 中有一个子 div，它被赋予了 .legend 类。现在我们可以更轻松地将其定位在该空间内。由于您不知道图例的高度，因此不能使用 50% 的负边距。相反，您可以使用CSS3 变换。它看起来像这样：
.legend {
position: relative;
top: 50%; /* relative to parent */
-webkit-transform: translateY(50%); /* relative to the element itself */
transform: translateY(50%);
}
JSFiddle here
JSFiddle在这里
This works well because the position is based on the parent element (or the closest ancestor with a defined position, but in this case, that would be the parent), and the transform is based on the element itself. So this will work regardless of the legend's height, your chart will resize properly, and you don't need to use JS to do it.
这很有效，因为位置基于父元素（或具有定义位置的最近祖先，但在这种情况下，这将是父元素），并且变换基于元素本身。因此，无论图例的高度如何，这都会起作用，您的图表将正确调整大小，并且您不需要使用 JS 来执行此操作。
回答by Wissam El-Kik
You shouldn't use any JS code. If you want the charts to become responsive, here's the code:
你不应该使用任何 JS 代码。如果您希望图表具有响应性，请使用以下代码：
http://jsfiddle.net/L9gubqvy/12/
http://jsfiddle.net/L9gubqvy/12/
Here's the CSS:
这是CSS：
.wrapper {
display: table;
width: 100%;
float:none;
clear:both;
}
.wrapper:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.element {
display: table-cell;
width: 50%;
}
#chart {
width: 100%;
}
.legend {
display: table-cell;
width: 50%;
vertical-align: middle;
}
PS: I'm having trouble posting the code using StackOverflow Code Snippet. I'll update the code later on.
PS：我在使用 StackOverflow 代码片段发布代码时遇到问题。稍后我会更新代码。
回答by Dainius Luk?a
svg image prevents the table-cellto get smaller. Solution for this is:
svg 图像防止table-cell变小。对此的解决方案是：
.highcharts-container, .highcharts-container svg {
width: 100% !important;
}
See the example http://jsfiddle.net/FzXEM/9/
请参阅示例http://jsfiddle.net/FzXEM/9/
There are other ways to make the chart resize correctly like using float: leftor position: absolutebut then there are other problems and you can only use vertical-alignin table or inline layouts.
还有其他方法可以使图表正确调整大小，例如使用float: left或position: absolute但还有其他问题，您只能vertical-align在表格或内联布局中使用。
回答by Manjunath Siddappa
try to use this Fiddle
尝试使用这个小提琴
i am not sure how much it will help you, i have just used Highcharts some of the functionality.
我不确定它对你有多大帮助，我刚刚使用了 Highcharts 的一些功能。
Note:Resize the window of jsfiddle and run it will adjust according to the window i am not sure why it is behaving like this
注意：调整jsfiddle的窗口大小并运行它会根据窗口调整我不知道为什么它会这样
Html
html
<div class="wrapper">
<div class="element">
<div id="container" style="width:100%;margin: 0 auto"></div>
</div>
Javascript
Javascript
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 25
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
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]
}]
});
});
CSS // i am not passing any css
CSS // 我没有传递任何 css
.wrapper {
display: table;
width: 100%;
}
.element {
display: table-cell;
width: 50%;
}
Please refer this link where Highchart is responsive http://jsfiddle.net/2gtpA/show/
请参考 Highchart 响应的链接http://jsfiddle.net/2gtpA/show/
