使用react-highcharts尝试更新xAxis类别的值,但没有这样做,它将值保留在我的config变量中。

时间:2018-12-03 15:01:08

标签: reactjs react-highcharts

如上所述,当我使用react-highchart库时,似乎无法获得要重新渲染的类别。我似乎能够设置图表值的数据,但是我无法更改xAxis类别的值,我们将不胜感激。我也在render方法中渲染highcharts。

配置代码

const config = {
  /* HighchartsConfig */

title: {
    text: ''
},

xAxis: {
    tickLength: 75,
    categories: [month1, month2, month3, month4],
    labels: {
      style: {
        color: 'black',
        fontSize:'13px'

      },
      formatter: function(){

      return '<span style="margin-right: 2.5px">' + this.chart.series[0].options.stack + '</span><span>' + this.chart.series[1].options.stack + 
      '</span><br /><div style="text-align:center"> <br />' + this.value + '</div> '
    },    
    useHTML: true
  } 
},

yAxis: [{ //--- Primary yAxis
  title: {
      text: 'Bugs, Questions And Enhancements'
  }
}, { //--- Secondary yAxis
  title: {
      text: 'Total Open'
  },
  opposite: true
}],

tooltip: {
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
    }
},
plotOptions: {
    column: {
        stacking: 'normal',
        allowPointSelect: false,

    },


},
legend: {
  events: {
    legendItemClick: function () {

       return false; 
       // <== returning false will cancel the default action
        }
    },
      itemStyle: {

          fontSize: '17px'
      }
},
credits: {
  enabled: false
},
series: 
[{
    yAxis: 0,
    type: 'column',
    name: 'Bug',
    color: '#1E90FF',
    stack: 'Open'

},
 {
    yAxis: 0,
    type: 'column',
    name: 'Bug',
    color: '#1E90FF',
    showInLegend: false,
    stack: 'Closed'
}, 
{
  yAxis: 0,
  type: 'column',
  name: 'Question',
  color: '#DC143C',
  stack: 'Open'
}, 
{
  yAxis: 0,
  type: 'column',
  name: 'Question',
  color: '#DC143C',
  showInLegend: false,
  stack: 'Closed'
},
{
  yAxis: 0,
  type: 'column',
  name: 'Enhancement',
  color: '#32CD32',
  stack: 'Open'
},
{ 
  yAxis: 0,
  type: 'column',
  name: 'Enhancement',
  color: '#32CD32',
  showInLegend: false,
  stack: 'Closed'
},{
    yAxis: 1,
    type: 'line',
    name: 'Total Open',
    color: '#2C2727',
    lineWidth: 4.5,
    animation: false,
    marker: {
      enabled: false
    }
  }

 ]};

设置类别无效的代码

 if(this.state.live == 0)
    {
       let chart = this.refs.chart.getChart();
       chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']);
                              chart.redraw();
            }

0 个答案:

没有答案