Highcharts React 中的自定义 Y 轴刻度

Question

我在我的 React 代码中使用 highcharts 进行趋势分析。在初始页面加载时，图表是空白的。用户可以在运行时间添加任何类型的系列。在添加的series的基础上，在图表中添加相应的yaxis，最多可添加3个yAxis。我想打开一个模式对话框，其中包含图表上每个 yaxis 的最小最大输入，并手动设置每个 yaxis 的最小最大值。我已经可以做到这一点，但需要一些技巧。

在 React 中有什么方法可以让图表完全加载并添加所有 y 轴后，我可以单击一个按钮并打开一个模式对话框？在图表中添加或删除系列时，并不总是执行 render 方法，因此模态对话框不知道图表中有多少个轴。

请告诉我是否可以在单击按钮时呈现模态对话框（我无法在执行呈现方法时预呈现它。）

谢谢。

Answer 1

您可以在图表事件函数中获取 React 组件引用并使用它来渲染一些元素：

chart: {
  events: {
    render: function() {
      ...
      // use React to render something
    }.bind(this)
  }
},

现场演示：https://codesandbox.io/s/2x0kpxkoxn

API参考：https://api.highcharts.com/highcharts/chart.events.render

Highcharts React 中的自定义 Y 轴刻度

Custom Y-Axis Scale in Highcharts React

scale

highcharts

reactjs

yaxis