Question

推荐使用什么方法来调整HTML页面中嵌入的Highchart的大小？

我将包含图表（<div>（以及Highcharts div本身）的chart.options.renderTo设置为style.resize="both"，但这似乎没有用（我怀疑是因为Highchart URL在图表的右下方）。具体来说，我正在寻找推荐的UI提示。

建议？

Answer 1

您需要在图表容器上设置相同的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

调整图表大小

1 个答案: