首页 文章

Highcharts over resize（使用flexbox）扩展父级

提问于
浏览 次
1

这个问题最初是一个flexbox问题，但已被改为高调图调整大小 .

问题：我在窗口调整大小时让图表完全调整大小与它相关 . 问题是这只发生在窗口调整大小事件上，因此当页面最初加载时，图表不是我想要的大小（通常更小）

码：

HTML:

<div id="datalogger">
    <div id="DataLoggerChartContainer" ng-show="dataAvailable"></div>
</div>

CSS/LESS: （我使用的是flex，但造型无关紧要）

#datalogger {

  display: flex;
  flex: auto;
  justify-content: center;
  align-items: center;
  width: 100%;

  #DataLoggerChartContainer {
    display: flex;
    flex: auto;
    width: 100%;
  }
}

JS: （调整图表大小）

function reflowChart() {
    var parent = angular.element(element[0]);
    chart.setSize(parent.width(), parent.height());
}

@brightmatrix帮助我意识到highcharts setSize() 方法只会调整图表 ONCE 的大小，因此不是理想的响应式解决方案 . 正如所建议的那样， reflow() 和 redraw() 也不是我想要的 . 这些方法不适用于响应，但主要用于将数据动态添加到图表并需要重新加载 . reflow() 在Highcharts API上公布，以动态调整大小's parent if it'的大小被更改 . 但是，我认为这仅在窗口未调整大小时才有效 . 因此，图表仍然必须在相同大小的窗口上，并且父级必须在其自己的容器内调整大小（例如，在按钮单击事件上（如在Highcharts API中））

（解决方案如下）

css highcharts data-visualization

2 回答

  • 2

    问题是，只要为 chart.setSize() 设置了固定值，就会删除图表的响应特性 . 我建议使用 chart.redraw() 函数添加百分比值，或者将 chart.reflow() 函数绑定到 resize 事件 .

    以下是API文档中两个函数的链接，以便您可以看到哪个最适合您的应用程序：

    我希望这有帮助！

    回复于
  • 2

    解决方案：

    在深入了解此应用程序的其他区域中的先前代码之后，我决定尝试在窗口调整大小事件上重绘（手动 - 不使用 redraw() 方法）图表 . 例如：

    $(window).on("resize", function() {
    chart.destroy();

    initChart();
    reflowChart();
});

    我的 initChart() 函数如下所示：

    function initChart() {
    chart = new Highcharts.Chart(options);
}

    我的 reflowChart() 函数仍然与上面提到的相同，但是，手动调整大小无关紧要，因为它调整为 CURRENT 窗口大小的父级的 CURRENT 高度/宽度 . 因为它在窗口的每个大小调整时被销毁并重新创建，所以这是一个理想的解决方案 .

    N.B: 这不是必需的，但建议调用 destroy() 方法，因为它使DOM保持整洁 . 此外，当页面首次加载时，我也会调用 initChart() 和 reflowChart()

    我希望这有助于将来可能遇到此问题的任何人！

    回复于

相关问题