Компонент Highcharts, который создает вторичный yAxis на основе props.boolean - PullRequest
Новая
       18

Компонент Highcharts, который создает вторичный yAxis на основе props.boolean

1 голос
/ 12 марта 2020

Я создаю компонент Highstock с Highcharts, используя реакционную оболочку. Я хочу включить параметр для добавления вторичного 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.

Мои логики c, проверьте doubleYAxis и если true добавить вторичную ось chart.addAxis(secondaryYAxis);, но где мне вызвать эту функцию на моем компоненте?

1 Ответ

2 голосов
/ 12 марта 2020

Вы можете использовать setState для управления количеством осей, например: 

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

Демо-версия: https://codesandbox.io/s/highcharts-react-demo-5q9db

...