HighCharts React Jsx中的xAxis标签和类别未更改

Question

我们正在提交表单时呈现LineSeries图表。此表单具有一个频域，根据该频域我们应更改高图中xAxis上显示的标签和类别。即使在传递正确的值之后，highchart也不会拾取新标签。尽管图表数据根据提交的表单而变化。请在下面找到渲染高图的代码段-

import React, { Component} from 'react';
import { HighchartsChart, Chart, withHighcharts, YAxis, Title, Legend, 
LineSeries } from 'react-jsx-highcharts';
var Highcharts = require('highcharts');


Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
'#64E572', 
         '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
    backgroundColor: {
        radialGradient: ['rgb(147, 147, 147)', 'rgb(75, 75, 75)'],
        stops: [
            [0, 'rgb(147, 147, 147)'],
            [1, 'rgb(75, 75, 75)']
        ]
    },
    marginBottom: 100
},
title: {
    style: {
        color: 'rgb(205, 205, 205)',
        font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
    }
},
subtitle: {
    style: {
        color: 'rgb(205, 205, 205)',
        font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
    }
},
legend: {
    itemStyle: {
        font: '9pt Trebuchet MS, Verdana, sans-serif',
        color: 'rgb(205, 205, 205)'
    },
    itemHoverStyle:{
        color: 'rgb(205, 205, 205)'
    },
    align: 'center',
    verticalAlign: 'bottom',
    x: 0,
    y: 0,
},
yAxis: {
    labels: {
        style: {
            color: 'rgb(205, 205, 205)'
        },
    },
    gridLineColor: 'grey',
},
};
Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({lang: {noData: "No Data"}})

class SalesTrendAndForecast extends Component {
constructor(props) {
    super(props);
    this.getXAxis = this.getXAxis.bind(this);
    this.getHistoricalData = this.getHistoricalData.bind(this);
    this.getForecastData = this.getForecastData.bind(this);
}

getXAxis() {
  var sales_axis =  this.props.data.sales.map(function(o) { return o.unit+' '+o.year;});
  var forecasts_axis = [];
  for (var forecast_type in this.props.data.forecasts){
      if (this.props.data.forecasts.hasOwnProperty(forecast_type)) {
          forecasts_axis = forecasts_axis.concat(this.props.data.forecasts[forecast_type].map(function(o) { return o.unit+' '+o.year;}));
          break;
      }
  }
  var final_axis = sales_axis.concat(forecasts_axis);
  return {
          categories: final_axis,
          labels:{style: {color: 'white'}}
         };
}

getHistoricalData() {
  if (!this.props.data.sales.length) {
      return [];
  }
  var forecasts_data = [];
  for (var forecast_type in this.props.data.forecasts){
      if (this.props.data.forecasts.hasOwnProperty(forecast_type)) {
          forecasts_data = this.props.data.forecasts[forecast_type].map(function(o) { return null});
          break;
      }
  }
  return this.props.data.sales.map(a => a.quantity).concat(forecasts_data);
}

getForecastData(type) {
  if (typeof this.props.data.forecasts[type] === "undefined") {
      return [];
  }
  return this.props.data.sales.map(function(o) { return null}).concat(this.props.data.forecasts[type].map(a => a.quantity));
}

render () {
  return (
  <div className="line-chart">
    <HighchartsChart xAxis={this.getXAxis()}>
  <Chart />

  <Title>DEMO GRAPH</Title>
  <Legend layout="horizontal" align="bottom" verticalAlign="bottom" />

  <YAxis>
    <LineSeries name="Historic Sales" data={this.getHistoricalData()} />
    <LineSeries name='Forecast-top_down' data={this.getForecastData("top_down")} />
    <LineSeries name='Forecast-bottom_up' data={this.getForecastData("bottom_up")} />
    <LineSeries name='Forecast-hybrid' data={this.getForecastData("hybrid")} />
  </YAxis>
</HighchartsChart>
  </div>
);
}
}

export default withHighcharts(SalesTrendAndForecast, Highcharts);