Highcharts 高库存+;角材料&x2B;柔性布局问题

Highcharts 高库存+;角材料&x2B;柔性布局问题,highcharts,angular-material,angular-flex-layout,Highcharts,Angular Material,Angular Flex Layout,我正在尝试在更大的角度项目中使用Highcharts(Highstock),使用角度材质UI组件和flex布局。我准备了一个小演示,其中有3个扩展面板(mat扩展面板)。前两个只包含空div,第三个包含包含一些数据的Highstock图表。我使用的是官方的highcharts(2.7.0)和highcharts(8.1.2) 1.)展开面板后出现一些奇怪的行为。如何繁殖:1。用图表展开第三个面板。尝试放大(“highcharts选择标记”按预期创建);2.)展开第一个或第二个面板,如果需要,向下

我正在尝试在更大的角度项目中使用Highcharts(Highstock),使用角度材质UI组件和flex布局。我准备了一个小演示,其中有3个扩展面板(mat扩展面板)。前两个只包含空div,第三个包含包含一些数据的Highstock图表。我使用的是官方的highcharts(2.7.0)和highcharts(8.1.2)

1.)展开面板后出现一些奇怪的行为。如何繁殖:1。用图表展开第三个面板。尝试放大(“highcharts选择标记”按预期创建);2.)展开第一个或第二个面板,如果需要,向下滚动到图形,并尝试放大-“highcharts selection marker”是否已创建或根本未创建。3.)如果您将鼠标指针从图表上移开,然后再移回到图表上-一切都已“修复”,缩放效果与预期一致。。。 如果调整浏览器窗口的大小,使“mat action”行中的按钮被包装成两行而不是一行,则可以看到缩放选择标记的相同移动。同样,若你们把鼠标移到图形上,然后离开图形,然后再回到图形上,一切看起来都正常

2.)当我使用highchart的“全屏查看”模块时,放大不起作用(与上述问题相同)。退出全屏后,图表超出容器的界限(看起来高度与全屏模式下的高度相同)

在Firefox和Chrome上测试。顺便说一句,firefox中的图表感觉有点慢(缩放时绘制/更新选择标记矩形)

我需要知道这是否是我的问题(CSS、flex、材质设置),或者highcharts和flex布局或角度材质是否存在一些关键问题,不建议同时使用它们

以下是演示:


感谢您的帮助。

它看起来像是一个回归错误(它在<7.2.0v中正常工作),已经报告并修复(修复已合并到主程序,但尚未发布):

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

当鼠标进入容器时,手动清除
chart.pointer.chartPosition

图表:{
renderTo:'测试'+i,
zoomType:'x',
活动:{
加载:函数(){
常数图=此;
高级图表。加法器(
图表.容器,
“老鼠”,
函数(){
chart.pointer.chartPosition=null;
}
);
}
}
},

要使图表在退出全屏模式后调整到其原始高度,我必须将100%高度样式添加到(style=“width:100%;height:100%;display:block;”)。请参阅中的hc组件