javascript - Highcharts - 窗口调整大小时边距更新

Question

我正在使用具有特定边距的 highcharts 创建一个区域样条图，我想在窗口 resize 上更新它。这是与图表相关的代码:

var chart = new Highcharts.chart({
    chart: {
      renderTo : options.element,
      marginLeft: -calcOutsideMargin(),
      marginRight: -calcOutsideMargin(),
      backgroundColor:'rgba(255, 255, 255, 0)',
      type: 'areaspline'
    },
    plotOptions: {              
      areaspline: {
        animation: false,
        states: { hover: { enabled: false } },
        fillOpacity: 0.5,
        marker:{
            states:{
                select: {
                    radius: 5,
                    fillColor: '#ff0000',
                    lineColor: '#404759'
                }
            }
        }
    },
    series: series
});

这是定义边距尺寸的函数:

calcOutsideMargin: function() {
    return ((window.addEventListener('resize', window.innerWidth) / 5 ) / 2) + 5;
}

不幸的是，我收到一条错误消息，指出预期长度为 NaN，如果我使用 window.innerWidth，它不会更新。您是否知道如何解决此问题并在调整窗口大小时更新边距？

预先感谢您的回复!

编辑

JSFiddle

Answer 1

你有一些不工作的代码。 charts.marginLeft、charts.marginRight 和 charts.width 不接受实时更改大小的函数；他们只接受变量和函数结果。您必须手动处理窗口 resize 事件并在那里完成所有工作。然后，您可以使用 chart.update 方法更改这些参数。

我的工作示例，图表位于中心。调整窗口大小并检查两个控制台是否有窗口调整大小事件和字符调整大小动画:

$(function () {
    //var chart;

    function calcOutsideMargin() {
        console.log('margin resize', Date.now());
        return ((window.innerWidth / 5 ) / 2);
    };

    $(window).resize(function() {
        var margin = calcOutsideMargin(),
            width =  window.innerWidth - (margin * 2);
        window.chart.update({
            chart: {
                renderTo: 'container',
                marginLeft: margin, // (vw/5)/2
                marginRight: margin, // (vw/5)/2
                width: width
            }
        });
    });

    var margin = calcOutsideMargin(),
        width =  window.innerWidth - (margin * 2);

    $(document).ready(function() {
        window.chart = new Highcharts.Chart({
            chart: {
              renderTo: 'container',
              marginLeft: margin, // (vw/5)/2
              marginRight: margin, // (vw/5)/2
              width: width, // window.addEventListener("resize", window.innerWidth),
              spacingBottom: 6,
              spacingTop: 0,
              backgroundColor:'rgba(255, 255, 255, 0)',
              type: 'areaspline'
            },
            title: { text: '' },
            legend: { enabled: false },
            xAxis: { visible: false, allowDecimals: false },
            yAxis: { visible: false },
            tooltip: { enabled: false },
            credits: { enabled: false },
            plotOptions: {              
              areaspline: {
              animation: false,
              states: { hover: { enabled: false } },
              fillOpacity: 0.5,
              marker:{
                states:{
                  select: {
                  radius: 5,
                  fillColor: '#ff0000',
                  lineColor: '#404759'
                }
                }
              }
              },
            },
            series: [{
                name: 'F',
                data: [6 , 11, 32, 110, 235, 369, 640, 1005, 1436 ]
            }, {
                name: 'C',
                data: [5, 25, 50, 120, 150, 200, 426, 660, 869, 1060]
            }]
        });
    });
});

我还添加了这段 CSS 代码，只是为了让图表居中对齐:

#container > div {
    margin:auto;
}

您可以在此处查看我的完整工作示例:http://zikro.gr/dbg/html/highcharts.html