Highcharts: Chart does not resize properly by maki

问题:

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?

回答1:

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

回答2:

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

.wrapper {
    float:left;
    width: 100%;
}
.element {
    float:left;
    width: 50%;
}
#chart {
    width: 100%;
}
.legend {
    width: 50%;
    float:left;
}

Example: http://jsfiddle.net/L9gubqvy/4/

回答3:

Something like this? For me, use perfect.

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:

$('#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/

回答4:

Here is a working Fiddle

The trick is to add two CSS properties:

• The wrapper element gets a position: relative;
• The chart div chart gets a position:absolute;

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

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.

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:

.legend {
  position: relative;
  top: 50%; /* relative to parent */
  -webkit-transform: translateY(50%); /* relative to the element itself */
  transform: translateY(50%);
}

JSFiddle here

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.

回答6:

You shouldn't use any JS code. If you want the charts to become responsive, here's the code:

http://jsfiddle.net/L9gubqvy/12/

Here's the 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.

回答7:

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

.highcharts-container, .highcharts-container svg {
     width: 100% !important;
}

See the example 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.

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

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

Html

<div class="wrapper">
    <div class="element">
<div id="container" style="width:100%;margin: 0 auto"></div>
    </div>

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

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

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

Please refer this link where Highchart is responsive http://jsfiddle.net/2gtpA/show/