Javascript 基于props.boolean创建辅助yAxis的Highcharts组件

我正在使用react包装器创建一个具有Highcharts的Highstock组件。我想启用一个参数来添加辅助

yAxis

。这就是我的组件的结构：

class BasicSeriesChart扩展组件{
建造师（道具）{
超级（道具）；
const{data}=this.props；
const doubleYAxis=this.props；
}
const secondaryYAxis={//Secondary yAxis
id:1，
};
此.state={
图表选项：{
系列：data.map（（集合，索引）=>({
设置
yAxis:doubleYAxis？secondary yAxis.id:0，
})
}
};
render（）{
const{chartOptions}=this.state；
返回(
);
}
}
BasicSeriesChart.propTypes={
数据：需要PropTypes.array.isRequired，
doubleYAxis:PropTypes.bool，
};
导出默认基本经验；

我在另一个文件中调用它：

const doubleYAxis=true；
const chartData=mockData.map（（系列）=>({
系列
}));
函数HighStock（）{
返回(
);
}
出口默认高库存；

要启用辅助

yAxis

我知道我可以定义

图表选项。yAxis

使用对象数组而不是单个对象，但我需要使其可重构，我的方法是调用

addAxis

方法

---

我的逻辑是，检查

doubleYAxis

，如果

true

添加次轴

chart.addAxis（secondaryYAxis）；

，但是我应该在我的组件上在哪里调用该函数？

您可以使用

设置状态

来操作轴的数量，例如：

toggleAxis(){
  this.setState({
    chartOptions: {
      yAxis: this.state.chartOptions.yAxis.length === 2 ? 
        [{}] : 
        [{}, {}]
    }
  });
}

---

现场演示：