Question

我正在使用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 here，“运行”代码，我看到50％：50％。调整输出窗口的大小并使其变大，一切正常，50％：50％可以，但是使输出窗口变小，图表不能正确调整大小。

我看到了$(window).resize();的一些解决方案。在我的情况下，我尝试使用outerHeight，但只有在我将屏幕尺寸设置得更大时，值才会更改。所以我发现这个解决方案有效：

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

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

Answer 1

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

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

#chart的新 css 如下所示：

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

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

的 Check my Fiddle

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

跟进：

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

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

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

Fiddle

Answer 2

为什么不能使用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/

Answer 3

这样的东西？对我来说，使用完美。

CSS：

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

.element {
  display: table-cell;
  width: auto;
}

#chart {
  width: 100%;
}

.legend {
  display: table-cell;
  width: 70px;
  vertical-align: middle;
}

时：

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

Answer 4

这是一个有效的Fiddle

诀窍是添加两个CSS属性：

包装器element获得position: relative;
图表div chart获得position:absolute;

Answer 5

说实话，我不太清楚为什么你的图表没有正确调整大小。但我有一种方法可以在不调整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 here

这很有效，因为位置基于父元素（或具有已定义位置的最近祖先，但在这种情况下，它将是父元素），并且变换基于元素本身。因此，无论图例的高度如何，这都将起作用，您的图表将正确调整大小，并且您不需要使用JS来执行此操作。

Answer 6

您不应该使用任何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 Code Snippet发布代码时遇到问题。我稍后会更新代码。

Answer 7

svg图像可以防止table-cell变小。解决方法是：

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

请参阅示例http://jsfiddle.net/FzXEM/9/

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

Answer 8

尝试使用 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/

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

8 个答案:

的 Check my Fiddle

跟进：

Fiddle