logo标签列表

Highcharts：缩小屏幕大小后图表无法正确调整大小

javascriptjqueryhtmlcsshighcharts
12

我正在使用 HighCharts 4.0.4 版本，并且我有一个图表，其中包含一个自定义图例：

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

CSS的代码如下所示。wrapper是一个表格，因此我可以在图例中使用table-cell和vertical-align: middle来实现。我希望wrapper的宽度都为50%。

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

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

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

#chart {
  width: 100%;
}

问题是，我在这里创建了一个JSFiddle（链接），如果输出/结果窗口很小，则会看到50%:50%。调整输出窗口并使其变大，一切正常，50%:50%也正常，但是缩小输出窗口后，图表无法正确调整大小。

我看到一些使用$(window).resize();的解决方案。在我的情况下，我尝试使用outerHeight，但是只有当屏幕尺寸变大时，值才会更改。因此，我找到了这个可行的解决方案：

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

但是是否有一种不需要使用 JavaScript，只能使用 HTML 和 CSS 的解决方案呢？

不必使用JSFiddle，你可以直接在StackOverflow上使用StackOverflow Code Snippet添加你的代码：http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ - Wissam El-Kik
8个回答
15

这可以仅使用CSS来完成，不需要调整大小函数。

尝试将position:absolute添加到您的图表css属性中。

#chart的新css将如下所示：

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

我认为这就是你想要的效果。

检查我的 Fiddle

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

后续：

如果您需要在窗口调整大小时使用动画调整 Highcharts 大小，则可以使用此语法。

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

我认为这更接近您想要的，使用Highchart的setSize方法并带有动画效果，而不是CSS。

演示

但是，使用您的解决方案，我如何在右侧垂直居中图例部分？“vertical-align: middle”无效。 - Tim
@Tim，为了使vertical-align: middle与position:absolute;配合使用，您必须将高度设置为绝对值。我更新了我的Fiddle以进行演示。这远非完美的解决方案，但希望能够满足您的需求。 - Dave Alperovich
好的，如果我将“ .legend”和“＃chart”设置为相同的高度，则可以垂直居中。 - Tim
@Tim，我使用Highchart的setSize方法在窗口调整大小事件上创建了一个新的Fiddle。 我认为这更符合您的要求。 - Dave Alperovich
@IcedDante，你有一个fiddle吗？ - Dave Alperovich
显示剩余2条评论
5

SVG图像会防止变小。解决方法如下：

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

请查看示例http://jsfiddle.net/FzXEM/9/


还有其他方法可以使图表正确缩放，例如使用float: left或position: absolute，但这会带来其他问题，并且只能在表格或内联布局中使用vertical-align。

3

为什么你不能使用默认的带有float:left选项的div代替表格单元格呢？

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

示例：http://jsfiddle.net/L9gubqvy/4/
图例需要垂直居中于图表中，这就是我使用“table-cell”的原因，这样我就可以使用“vertical-align: middle;”。 - Tim
你可以使用绝对定位，top 50%，以及负的margin top。 - Sebastian Bochan
是的，如果我知道垂直对齐容器的高度，那么这是可以做到的，但我不知道，所以我不能使用这种方法。 - Tim
在jQuery中，你有一个height()函数，所以使用它并将height值的一半作为参数调用css()函数。 - Sebastian Bochan
2

这里有一个可用的Fiddle。

技巧是添加两个CSS属性:

  • 包装器element获得position: relative;
  • 图表
    chart获取position:absolute;
我不知道为什么这样做有效，但是我已经尝试了其他所有方法，而这是唯一解决缩小图表高度时出现的调整大小问题的方式。谢谢！ - Crossoni
1
"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/

0
说实话，我不太确定为什么您的图表无法正确调整大小。但是我有一种方法可以在JS中进行调整而无需调整大小，假设您可以设置包装器div的高度。
首先，如果您没有使用表格数据，真的不应该将元素样式化为表格；我从您的CSS中删除了这个。其次，如果您想要居中显示图例，它确实应该在与图表并排的单独元素内；每个元素都应该包装在相同类型的div中。通常我会称之为列，但由于您已经使用了.element，那也可以。这些将分别向左浮动，宽度为50％，高度为100％（这很重要，因为除非父级定义了高度，否则我们无法垂直居中图例）。
然后我们在第二个.element内部有一个子div，它被赋予.legend类。现在我们可以更轻松地将其定位在该空间内。由于您不知道图例的高度，因此无法使用50％的负边距。相反，您可以使用CSS3 transform。它看起来像这样：
.legend {
  position: relative;
  top: 50%; /* relative to parent */
  -webkit-transform: translateY(50%); /* relative to the element itself */
  transform: translateY(50%);
}

JSFiddle 这里

这个方法很好用，因为位置是基于父元素（或最近的已定义位置的祖先元素，但在这种情况下，那就是父元素），而变换是基于元素本身的。所以无论图例的高度如何，您的图表都将正确地调整大小，而且不需要使用 JS 来完成。

0

你不应该使用任何JS代码。 如果你想让图表变得响应式，这是代码：

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

这是 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：我在使用StackOverflow代码片段发布代码时遇到了问题。稍后我会更新代码。

0

尝试使用这个Fiddle

我不确定它能帮到你多少，我只是用了一些 Highcharts 的功能。

注意: 调整 jsfiddle 窗口大小并运行，它将根据窗口进行调整，我不确定为什么会出现这种情况。

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 // 我没有传递任何 CSS

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

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

请参考此链接，其中Highchart是响应式的：http://jsfiddle.net/2gtpA/show/
不，这对我没有帮助。我需要一个定制的图例放在图表的右侧，并且应该是垂直对齐的。你只显示了一个图表。 - Tim
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接