Highcharts 大小在 div.animate() 上没有变化

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 以这种方式调整大小的本机能力。

在您的 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 日）：根据原始发帖人对我的回答的评论，我在 setSize() 中添加了 false 参数，以防止图表本身在调整大小。你也可以在animate()的第二个参数中添加一个整数，在你声明上、左等维度之后，在包含setSize()的函数之前，调整包含的div元素的动画。

Answer 2

如果您检查浏览器开发工具中的元素，您会发现 highcharts 正在设置内联样式。为了用外部 CSS 覆盖它们，你需要拿出你的“！important”棒。要更改由 highcharts 创建的内部 div 的大小及其对高度和宽度的内联确定，需要直接定位它，并且新值需要“！important”来覆盖 highcharts 计算的开始值。

Answer 3

请在http://jsfiddle.net/devanshumadan/jqqz6vvm/6/上找到更新的解决方案

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]
        }]
    });   
    
});

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

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="chartDiv">
    <div id="chartContainer"></div>
</div>