Javascript Highcharts窗口上的大小错误

这里有个奇怪的问题。我正在构建一个highchart并将其放置在bootstrap 3旋转木马中。当窗口处于“最大化”以外的任何大小时，图表标签和数据都会正确匹配该区域。但是，当最大化窗口时，轴标签和标题都会移出可见空间。奇怪的是，即使窗口大小从非最大化到最大化的差异只有几个像素，这种情况也会发生

有人知道highcharts的全屏设置或类似设置可能导致这种情况吗？我狂热的谷歌搜索结果一无所获

图表构造代码相当长，但我将复制此处所需的内容。还要注意，当窗口未最大化时，setSize（）动画和功能都是完美的

// The relevant highcharts code
var chartOptions = {
                chartType: 'column',
                reportContainer: 'reportResultsContainer',
                chartContainerName: 'reportChart',
                title: 'Driver Tonnages (Total ' + totalTonsSum.formatMoney(2, false) + ')',
                //floatingTitle: true,
                //titleY: 20,
                chartName: 'Drivers',
                yaxisName: 'Tons',
                //rotateDegrees: -90,
                chartData: deliveryData,
                xAxisTitlePadding: '0px',
            };
// later on
$('#' + chartContainerName).highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: chartType,
            //margin: [50.50,50,50]
        },
        title: titleObject,
        subtitle: subtitleObject,
        tooltip: {
            headerFormat: headerFormatHtml,
            pointFormat: pointFormatHtml
        },
        plotOptions: {
            column: {
                allowPointSelect: true,
                cursor: cursor,
                dataLabels: {
                    enabled: true,
                    y: rotateDegrees != 0 ? -20 : 0, // 15 pixels up from the top
                    rotation: rotateDegrees,
                    formatter: dataLabelformat,
                },
            }
        },
        xAxis: {
            type: 'category',
            title: {
                text: xaxisName,
                useHTML: true,
                style: { paddingTop: xAxisTitlePadding }
            },
            labels: {
                step: xAxisLabelStep,
            },
        },
        yAxis: {
            title: {
                text: yaxisName,
            },
        },
        legend: {
            enabled: false
        },
        series: [{
            name: xaxisName,
            type: chartType,
            colorByPoint: true,
            data: chartData,
        }, ]
    });
// the set size function, called on window resize
$('.highchart').each(function() {
    $(this).highcharts().setSize($('#carouselContent').width() - 35, $('#carouselContent').height() - 35, doAnimation=true)
});

以下是图表的图像。第一种情况是在最大分辨率下窗口最小化2px。第二个是最大化时的图表。请注意，图表大小作为一个整体是相同的。

---

我花了很长时间研究这个问题，终于找到了解决方案

在上面的示例中，我使用的是Bootstrap3旋转木马中的图表。当面板未显示时，持有面板的div将其CSS“display”设置为“none”。在这种情况下，Highcharts会发疯，并且格式不正确。作为一种解决方案，我绑定了一个处理程序来观察转换之前触发的幻灯片事件（slide.bs.carousel for Bootstrap），它触发一个JQuery

$（window.resize（）

事件。这会触发图表正确格式化，就像CSS“display”属性从“none”恢复为“normal”之后，但在转换动画显示图表之前一样

规程问题：当你在这个方法中启动一个window resize（）时（DataTable到目前为止已经确认），一些其他插件似乎不喜欢它，并且扭曲了它们的内容。如果发生这种情况，请确保根据即将显示的内容使用“If”子句来屏蔽函数fire

示例代码：

Carousel.$Wrapper.on('slide.bs.carousel', function (evt) { onSlide(evt) });

---

你能发布像JSFIDLE这样的实时示例吗？我很乐意，但正如我所说的，创建图表的方法相当复杂，因为整个程序是C#MVC，附带CSHTML。即使我花了一个小时制作一个jfiddle，我也怀疑我是否能重现这种效果，因为创建/运行我的版本的大部分代码都需要剥离。我相信答案不是一行拙劣的代码，而是我在highcharts中错过的插件冲突或DOM设置。这更像是一个理论/知识问题。如果窗口最大化，您能否检查是否调用了setSize？它是用适当的值来调用的吗？当调整图表容器的大小时，还有一个通常很有用的方法。setSize在$（window）.resize（）上调用，因此当窗口最大化时，会调用yes。这是代码中唯一一次调用setSize。图表呈现时会触发resize（）事件，以便在页面加载时为其指定适当的大小。我通过控制台检查了该函数何时被调用以及一切是否正常。使用firebug检查时，由于某种原因，xaxis大小似乎溢出了图表区域（已正确设置）。。。它似乎没有包含在图表的其余格式中。测试reflow（）后，它似乎为图表提供了正确的宽度，但没有提供正确的高度。。。我将对它进行更多的测试，但我认为这个函数不是答案。