Question

我正在使用highcharts创建一个带有特定边距的areapline图，我想在窗口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方法更改这些参数。

我的工作示例中心的图表。调整窗口大小并检查两个控制台是否有窗口调整大小事件，并且chars调整大小动画：

$(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

Answer 2

您还可以调整容器大小：

$(window).resize(function() {
    $('#container').css({
        "marginLeft": calcOutsideMargin() + "px",
        "marginRight": calcOutsideMargin() + "px"
    });
});

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

2 个答案: