如上所述,当我使用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();
}