javascript - 窗口最大化时 Highcharts 大小错误

Question

这里有奇怪的问题。我正在构建一个 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 时。第二个是最大化时的图表。请注意，整个图表大小是相同的。 /image/tgZlt.jpg

Answer 1

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

在上面的示例中，我在 Bootstrap 3 轮播中使用图表。当面板未显示时，持有该面板的 div 的 CSS 'display' 设置为 'none'。当这种情况发生时，Highcharts 会崩溃，并且无法正确格式化自身。作为解决方案，我绑定(bind)了一个处理程序来监视在转换之前触发的幻灯片事件(Bootstrap 的 Slide.bs.carousel)，该事件触发 JQuery $(window).resize() 事件。这会触发图表正确设置自身格式，因为它是在 CSS“显示”属性从“无”恢复为“正常”之后、但在过渡动画显示图表本身之前进行的。

顺序点:当您在此方法中触发窗口 resize() 时，其他一些插件似乎不喜欢它(到目前为止已确认 DataTable)，并扭曲其内容。如果您遇到这种情况，请务必使用“if”子句来根据即将显示的内容来屏蔽函数触发。

示例代码:

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