javascript - HighCharts (HighMaps) - 调整大小的函数

标签 javascript jquery html css highcharts

我的问题很简单(我认为)

我有一个类为“容器”的 DIV,我用它作为我的 map 。这个很棒的插件 (Highcharts) 是响应式的,但它只会在窗口调整大小时调整大小。

我需要'强制'调整大小而不改变我的窗口。更好地解释,当我点击一个状态时,我会在它的一侧显示另一个 DIV,所以,为了我显示它,我需要调整我的“容器”的大小,但 map 只计算调整窗口大小的 DIV 的大小,因为我说。我只需要在我的函数中调整 map 大小即可显示另一个 DIV。

这是我的代码:

HTML:

<div class="container"></div>
<div class="info-maps"></div>

CSS:

.container{
    width: 100%;
    float: left;
}
.info-maps{
    width: 50%;
    display: none;
    float: left;
}
.info-maps-show{
    display: block !important;
}
.container-resize{
    width: 50% !important;
}

Javascript(jQuery):

$(**State**).click(function(){
    $('.container').addClass('container-resize');
    $('.info-maps').addClass('info-maps-show');

    //Here I need to do the map resize :)
}

最佳答案

您可以将强制重绘作为 Highcharts 回调的一部分。这里有一个很好的解释:Append onload or redraw event functions dynamically in Highcharts

关于javascript - HighCharts (HighMaps) - 调整大小的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38333112/

相关文章:

javascript - 具有范围数据数组的 AngularJS 指令

php - 单击链接时使用 Jquery 更新 PHP session 变量

javascript - jQuery 不记录事件或执行功能

html - 在 div 中居中垂直列表

javascript - TestCafe - 在 <select> 中选择选项

javascript - 使用 javascript 函数验证表单

javascript - 用于在页面上显示 div 标签的 css

html - 不透明度过渡在 Firefox 和 IE(以及其他?)中不起作用

html - 试图使子菜单居中

javascript - 嵌套的网络组件和事件处理