时间戳

首页 > 解决方案 > 调整 Highchart 的大小

highcharts - 调整 Highchart 的大小

问题描述

调整嵌入在 HTML 页面中的 Highchart 大小的推荐方法是什么？

我将<div>包含图表（chart.options.renderTo）（和 Highcharts div 本身）的 设置为style.resize="both"但似乎不需要（我怀疑是因为 Highchart URL 位于图表的右下角）。具体来说，我正在寻找推荐的 UI 提示。

建议？

标签： highcharts

解决方案

您需要padding在图表容器上设置相同才能看到resize. 如果图表容器尺寸发生变化，则需要调用chart.reflow方法：

CSS：

#container {
    width: 400px;
    height: 400px;
    background: #e2eaad;
    margin: 0 auto;
    resize: both;
    padding: 10px;
}

JS：

var chart = Highcharts.chart('container', {
    series: [{
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

document.getElementById('container').addEventListener("click", function() {
    chart.reflow();
});

现场演示：http: //jsfiddle.net/BlackLabel/pnq8w6tr/

API：https ://api.highcharts.com/class-reference/Highcharts.Chart#reflow

推荐阅读