Highstock + angular material + 弹性布局问题

Question

我正在尝试在更大的 Angular 项目中使用 Highcharts (Highstock)，使用 Angular Material UI 组件和弹性布局。我准备了一个小演示，其中有 3 个扩展面板 (mat-expansion-panel)。前两个仅包含空 div，第三个包含带有一些数据的 Highstock 图表。我正在使用官方 highcharts-angular 包装器 (2.7.0) 和 Highcharts (8.1.2).

1.) 展开面板后有一些奇怪的行为。如何重现： 1. 用图表展开第三个面板。尝试放大（“highcharts-selection-marker”按预期创建）； 2.) 展开第一个或第二个面板，如果需要向下滚动到图表并尝试放大 - “highcharts-selection-marker”被创建为移位或根本不移位。 3.) 如果您将鼠标指针从图表上移开然后返回到图表上 - 一切都是“固定的”并且缩放按预期工作...... 如果您调整浏览器 window 的大小，则可以看到缩放选择标记的相同移动，以便 mat-action-row 中的按钮被包裹在两行而不是一行中。再一次，如果您将鼠标移到图表上，然后离开图表，然后再移回图表 - 一切看起来都正常。

2.) 当我使用 highchart 的“全屏查看”模块时 - 放大不起作用（与上述相同的问题）。并且退出全屏后图表超出容器范围（看起来高度和全屏时一样）

已在 Firefox 和 Chrome 上测试。顺便提一句。 Firefox 中的图表感觉有点慢（painting/updating 缩放时选择标记矩形）。

我想知道这是否是我的问题（CSS、flex、Material 设置）或者 highcharts 和 flex-layout 或 Angular Material 不建议一起使用

这是演示： https://stackblitz.com/edit/angular-ivy-mpzekw

感谢您的帮助。

Answer 1

它看起来像一个回归错误（它在 < 7.2.0v. 中工作正常）已经报告并修复（修复已合并到 master，但尚未发布）：https://github.com/highcharts/highcharts/issues/12868.

从问题线程复制的解决方法：

Manually clear chart.pointer.chartPosition when mouse enters container:

https://jsfiddle.net/BlackLabel/176294kx/

      chart: {
        renderTo: 'test' + i,
        zoomType: 'x',
        events: {
          load: function() {
            const chart = this;
            Highcharts.addEvent(
              chart.container,
              'mouseenter',
              function() {
                chart.pointer.chartPosition = null;
              }
            );
          }
        }
      },

Highstock + angular material + 弹性布局问题

Highstock + angular material + flex-layout problems

highcharts

angular-material

angular-flex-layout