根据props.boolean创建辅助yAxis的Highcharts组件

Question

我正在使用React包装器使用Highcharts创建Highstock组件。我想启用一个参数来添加辅助yAxis。这就是我的组件的结构：

class BasicSeriesChart extends Component {
  constructor(props) {
    super(props);
    const { data } = this.props;
    const doubleYAxis = this.props;
  }
  const secondaryYAxis = { // Secondary yAxis
      id: 1,
    };

  this.state = {
    chartOptions: {
      series: data.map((set, index) => ({
      ...set,
      yAxis: doubleYAxis ? secondaryYAxis.id: 0,
      })
    }
  };
  render() {
  const { chartOptions } = this.state;

    return (
      <HighchartsReact
        highcharts={Highcharts}
        constructorType="stockChart"
        options={chartOptions}
        allowChartUpdate
      />
    );
  }
}

BasicSeriesChart.propTypes = {
  data: PropTypes.array.isRequired,
  doubleYAxis: PropTypes.bool,
};

export default BasicSeriesChart;

我在单独的文件上调用它：

const doubleYAxis = true;
const chartData = mockData.map((series) => ({
  ...series,
  }));

function HighStock() {

  return(
    <BasicSeriesChart
      data={chartData}
      doubleYAxis={doubleYAxis}
    />
  );
}

export default HighStock;

[启用辅助yAxis，我知道我可以用对象数组而不是单个对象来定义chartOptions.yAxis，但是我需要使其可重构，我的方法是调用addAxis方法。

[我的逻辑是，检查doubleYAxis，如果true是否添加辅助轴chart.addAxis(secondaryYAxis);，但是我应该在组件的哪个位置调用该函数？

Answer 1

您可以使用setState来控制轴数，例如：

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

---

实时演示： https://codesandbox.io/s/highcharts-react-demo-5q9db