chart.scrollablePlotArea 意外行为答案

【问题标题】：chart.scrollablePlotArea unexpected behaviorchart.scrollablePlotArea 意外行为
【发布时间】：2020-04-30 12:52:04
【问题描述】：

我正在尝试将scrollBar 上的xAxis 到chart.scrollablePlotArea 添加到我的图表中，但它没有按预期工作。我很难让它出现。我找到的解决方案是从我的react-component 中删除containerProps

containerProps={{
  className: "chart",
  style: {
    height: "500px",
    minWidth: "280px"
  }
}}

随着scrollBar 出现，但出现了一些意想不到的行为，首先fullScreen 坏了（它开始出现黑条），其次customButton 开始随着图表移动。我搜索了exporting.buttons.contextButtonAPI，但找不到任何属性来修复它的位置。

Here 是一个工作演示，感谢任何帮助。

【问题讨论】：

【解决方案1】：

我找到的解决方案是从我的 react-component 中删除 containerProps

似乎scrollablePlotArea 可以在不删除containerProps 的情况下正常工作，但容器宽度必须小于设置的scrollablePlotArea.minWidth。

首先全屏坏了（它开始出现黑条）

这是一个已经修复的错误。下一个版本后将在 Highcharts npm 中提供。

第二个 customButton 开始随着图表移动

您是如何找到此功能的？似乎 customButton 在 API 中不可用，这意味着不完全支持。

【讨论】：

容器宽度是多少？在cointainerProps 上定义的那个？我正在尝试使用小于scrollablePlotArea.minWidth 的宽度，继续移动视图将允许我使用触摸手势滚动它，但没有滚动条。关于customBotton 我不确定，可能是在一些旧论坛帖子上发现它是一种解决方法。
是的，容器宽度可以在containerProps中设置。通过说容器宽度，我想到了容器上设置的任何样式宽度选项。 scrollablePlotArea.minWidth 是应用 scrollablePlotArea 功能的值。因此，如果您没有固定样式宽度值（图表是响应式的），则仅当宽度已更改为较低值时才会应用此功能。