首页 文章

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

提问于
浏览 次
7

我正在使用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 a 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%;
}

问题是，如果输出/结果窗口很小，我创建了一个JSFiddle here，"running"代码，我看到50％：50％ . 调整输出窗口的大小并使其变大，一切正常，50％：50％可以，但是使输出窗口变小，图表不能正确调整大小 .

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

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

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

javascript jquery html css highcharts

8 回答

  • 0

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

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

    #chart 的新 css 看起来像这样：

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

    我想这就是你想要的效果 .

    检查我的小提琴

    note: 我删除了所有调整大小 Javascript

    跟进：

    如果需要在动画窗口调整大小时调整Highcharts的大小，可以使用此语法执行此操作 .

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

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

    小提琴

    回复于
  • 3

    Instoed of table cell，为什么你不能使用带有 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/

    回复于
  • 9

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

    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/

    回复于
  • -1

    这是一个工作Fiddle

    诀窍是添加两个CSS属性：

    • 包装器 element 得到 position: relative;

    • 图表div chart 获得 position:absolute;

    回复于
  • 1

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

    回复于
  • 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 Code Snippet发布代码时遇到问题 . 我稍后会更新代码 .

    回复于
  • 1

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

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

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

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

    回复于
  • 0

    试着用这个 Fiddle

    我不确定它对你有多大帮助，我刚刚使用了Highcharts的一些功能 .

    Note: 调整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/

    回复于

相关问题