Highcharts：通过缩小屏幕，图表无法正确调整大小

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 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.

CSS看起来像这样。包装器是一个表，因此我可以在图例中使用table-cell一个vertical-align：middle。我希望两者都有50％的包装宽度。

.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吗？

8 个解决方案

#1

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

这应该只使用CSS ...没有调整大小的功能。

try adding position:absolute to your chart css property

尝试将position：absolute添加到图表css属性中

The new css for #chart would look like this:

#chart的新css如下所示：

#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 setSize method with animation instead of CSS)

我认为这更像你想要使用Highchart setSize方法和动画而不是CSS

Fiddle

#2

Instaed of table cell, why you cannot use default divs with the float:left option?

表单元格的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/

示例：http：//jsfiddle.net/L9gubqvy/4/

#3

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]
    }]

});

});

http://jsfiddle.net/L9gubqvy/9/

http://jsfiddle.net/L9gubqvy/9/

#4

Here is a working Fiddle

这是一个工作小提琴

The trick is to add two CSS properties:

诀窍是添加两个CSS属性：

• The wrapper element gets a position: relative;
• 包装元素得到一个位置：relative;
• The chart div chart gets a position:absolute;
• 图表div图得到一个位置：绝对;

#5

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来执行此操作。

#6

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 * Code Snippet. I'll update the code later on.

PS：我在使用* Code Snippet发布代码时遇到了麻烦。我稍后会更新代码。

#7

svg image prevents the table-cell to get smaller. Solution for this is:

svg图像可以防止表格单元变小。解决方法是：

.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: left or position: absolute but then there are other problems and you can only use vertical-align in table or inline layouts.

还有其他方法可以使图表正确调整大小，例如使用float：left或position：absolute但是还有其他问题，您只能在表格或内联布局中使用vertical-align。

#8

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/