Question

我有以下HTML：

<div class="chartDiv">
    <div id="chartContainer"></div>
</div>

和CSS：

.chartDiv {
    position: absolute;
    height: 1280px;
    width: 720px;
    top:0px;
    left:0px;
}
#chartContainer {
    position:absolute;
    height:100%;
    width:100%;
}

我发起了一个Highchart：

$("#chartContainer").highcharts({
    ....
});

现在我想使用以下方法更改chartDiv的大小和位置：

$(".chartDiv").animate({
    top: "100px",
    left: "100px",
    width: "640px",
    height: "360px"
)};

正如预期的那样，chartContainer会相应地更改其大小，但Highcart仍保持相同的大小。我解释说，如果没有宣布其他内容，它将自动更改为其父级大小，但事实并非如此。是否由于使用.animate图表没有反应？理想情况下，图表将使用其父级进行动画处理，因为chartDiv也有边框，如果它首先动画，然后是图表（现在甚至不是这种情况），它看起来会很糟糕。

Answer 1

正如您所发现的，Highcharts可视化可能很难调整大小，reflow()函数并不总是一个有用或合适的解决方案。

我不确定您是否注意到了，但如果您调整浏览器窗口大小，则图表会重塑其包含的div。你想要做的是模仿Highcharts＆＃39;本地调整大小的能力。

在animate函数中，我添加了setSize()函数，基本上将图表重置为包含div的新维度。

$(".chartDiv").animate({
    top: "100px",
    left: "100px",
    width: "640px",
    height: "360px"
}, function () {
    $('#chartContainer').highcharts().setSize(
        $(".chartDiv").width(), // new width of the containing div
        $(".chartDiv").height(), // new height of the containing div
        false // don't animate the chart itself changing
    );
});

这是JSFiddle上代码的工作版本（基于其中一个Highcharts演示），展示了其工作原理：http://jsfiddle.net/brightmatrix/02hr0wqs/

我希望这对你有帮助！

更新（2016年7月18日）：根据原始海报对我的回答的评论，我在{{1}中添加了false的参数在调整大小时防止图表本身动画化。您可以在setSize()之后添加一个整数作为第二个参数，在声明顶部，左侧等维度之后和包含animate()的函数之前，调整包含div元素的动画

Answer 2

如果您检查浏览器开发工具中的元素，您会发现highcharts正在设置内联样式。要使用外部CSS覆盖它们，您需要取出“重要的”＃34;棒。要更改由highcharts创建的内部div的大小及其高度和宽度的内联确定，它需要直接定位，新值将需要＆＃34;！important＆＃34;覆盖highcharts计算的开头价值。

Answer 3

请在此http://jsfiddle.net/devanshumadan/jqqz6vvm/6/

上找到更新的解决方案

＆＃13;

color_id

＆＃13;

var seriesData = null;

setTimeout(function(){
 $(".chartDiv").animate({
    top: "100px",
    left: "100px",
    width: "640px",
    height: "360px"
});
}, 10000);

setInterval(function(){
console.dir($('#chartContainer').highcharts().series);
seriesData = [((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1), ((Math.random() * 30) + 1)];
var chart = $('#chartContainer').highcharts();
        chart.series[0].setData(seriesData, false);
$('#chartContainer').highcharts().redraw();
}, 5000);

$(function () {
    $('#chartContainer').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    });   
    
});

＆＃13;

.chartDiv {
    position: absolute;
    height: 1280px;
    width: 720px;
    top:0px;
    left:0px;
}
#chartContainer {
    position:absolute;
    height:100%;
    width:100%;
}

＆＃13;

div.animate（）上的高图大小不会改变

3 个答案: