基于 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

基于 props.boolean 创建次要 yAxis 的 Highcharts 组件

Highcharts component that creates secondary yAxis based on props.boolean

javascript

reactjs

highcharts

react-highcharts