Question

我使用高图表生成堆积条。这是我的div -

  <div id="container" style="min-width: 2000px; height: 3000px; margin: 0 auto"></div>

这里我可以在每个点击事件上更改此div大小，以便图像大小也随着div大小而增长。

请指导

Answer 1

您<img>中的<div id="container">设置为

img {
    display:block;
    max-width: 100%;
    height: auto;
}

如果您正在使用Boostrap，则可以将img-responsive课程添加到<img>

修改

好的，如果您希望图表调整大小并适合您的新容器宽度和高度，您应该调用该方法：$( "#container" ).highcharts().reflow();在您完成调整div的大小后

如果您添加<button id="test">TEST</button>

你可以这样做：

$('#test').on("click",  function () {
    $( "#container" ).width( $( "#container" ).width() + 500 );
    $( "#container" ).height( $( "#container" ).height() + 500 );
    $( "#container" ).highcharts().reflow();
});

确保已加载jQuery js以使其正常工作：）

Answer 2

要更改div大小，您可以尝试：

$('div').click(function(){
    $(this).animate({height:'+=50', width:'+=50'})
 })

FIDDLE

Answer 3

您可以在点击事件上重排图表。我假设您点击了图表：

$('#container').click(function () {
    // Set size here according to your demands and then reflow your chart
    $( this ).width( $( this ).width() + 200 );
    $( this ).height( $( this ).height() + 200 );
    $( this ).highcharts().reflow();
});

参考：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-reflow/

如何更改显示图像的div的大小

3 个答案: