我正在使用react-highcharts。除了无数据状态外，它工作正常。 当图表有空数据时，我需要显示“无可用数据”消息。
我已经检查了官方 highcharts 的 no-data-to-display.js 但它不适用于 React。 我想得到这样的结果：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/no-data-to -显示/无数据饼/
import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display');
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;
我正在使用
reactreact-highchartshighcharts-no-data-to-display您的导入应该如下所示。
import Highcharts from 'highcharts';
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
import HighchartsReact from 'highcharts-react-official';
NoDataToDisplay(Highcharts);
定义无数据消息的选项。
const options = {
lang: {
noData: props.noDataMessage,
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030',
},
},
};
在您的高图表中使用此选项。
<HighchartsReact
highcharts={Highcharts}
options={options}
/>
https://github.com/kirjs/react-highcharts
提示：使用 highcharts 模块/附加组件，如导出、数据等（演示）
例如：
import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display')(ReactHighcharts.Highcharts)
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
lang:{
noData: 'no data!'
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display')(Highcharts.Highcharts)
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
lang:{
noData: 'no data!'
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;更新：我为此创建了一个 npm 包，只需安装它，然后使用它！这个-> react-highcharts-无数据显示
答案：您要做的就是在
(ReactHighcharts.Highcharts)require('highcharts-no-data-to-display')以防万一，如果有人面临同样的问题（尝试在 React-HighCharts 中添加“无数据”消息）。步骤是：
npm install highcharts-no-data-to-display --saverequire('highcharts-no-data-to-display')(ReactHighcharts.Highcharts)>
lang:{
noData: 'no data!' //the text to be displayed
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
}
@ittus 所要求的完整代码应该是
import React from 'react';
import Highcharts from 'react-highcharts/dist/bundle/highcharts';
require('highcharts-no-data-to-display')(Highcharts.Highcharts)
class MyChart extends React.Component {
constructor(props) {
super();
this.state = this._getInitialState(props);
}
static chartColors() {
return [
'#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
]
}
componentWillReceiveProps(newProps) {
this.setState(this._getInitialState(newProps));
}
_getInitialState(props) {
return {
chartConfig:
{
colors: MyChart.chartColors(),
chart: {
type: 'column',
events: {
load: function(event) {
event.target.reflow();
}
}
},
credits: {
enabled: false
},
title: {
text: props.title
},
xAxis: {
type: 'datetime',
title: {
text: '',
style: {
fontSize: '12px'
}
},
labels:{
style:{
fontSize: '12px'
}
},
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e-$b-%y',
week : '%e',
month : '%e',
year : '%e'
},
alternateGridColor: '#FAFAFA',
startOnTick: true,
endOnTick: true,
categories: [],
},
yAxis: {
min: 0,
title: {
text: props.yTitle?props.yTitle: ""
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
y: 15,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
lang:{
noData: 'no data!'
},
noData: {
position: {
"x": 0,
"y": 0,
"align": "center",
"verticalAlign": "middle"
}
},
series: props.series
}
};
}
render() {
return (
<div refs="wa-chart">
<Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
</div>);
}
}
export default MyChart;
从“highcharts/modules/no-data-to-display”导入 highchartsNoData；
highchartsNoData（Highcharts）
如果您在 React-Highchart 中看不到没有数据消息，请尝试这肯定会起作用。