Highcharts

Question

我正在创建具有特定边距的 highcharts 区域样条图，我想在 window 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，它不会更新。您是否知道如何解决此问题并在 window 调整大小时更新边距？

提前感谢您的回复！

编辑

JSFiddle

Answer 1

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

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

$(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 - window 调整大小后边距更新

Highcharts - margins update on window resize

javascript

window-resize