使用React 0.13.3和react-highcharts 3.0.0的Nodata消息

时间：2016-05-28 07:20:50

标签： javascript reactjs highcharts react-highcharts

我正在使用react-highcharts。除了nodata状态之外它完美地工作。 当图表有空数据时，我需要显示“无数据可用”消息。

我检查了官方高级图表的无数据到display.js，但它不适用于React。 我想得到这样的结果：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/no-data-to-display/no-data-pie/ 

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;

我正在使用react 0.13.3，react-highcharts版本3.0.0和highcharts-no-data-to-display版本0.1.2

4 个答案:

答案 0 :(得分：0)

https://github.com/kirjs/react-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;

答案 1 :(得分：0)

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;

答案 2 :(得分：0)

更新：我为此创建了一个npm包，只需安装它，然后使用它！这一个 - ＆gt; react-highcharts-no-data-to-display

答案：您要做的是在(ReactHighcharts.Highcharts)旁边添加require('highcharts-no-data-to-display')这么简单吗？

以防万一，如果有人遇到同样的问题（试图在React-HighCharts中添加“无数据”消息）。步骤是：

  1. 安装它！在终端运行中：npm install highcharts-no-data-to-display --save
  2. 在包含要添加无数据消息的图表的react文件中，您必须在第一行添加require('highcharts-no-data-to-display')(ReactHighcharts.Highcharts)
  3. 此外，如果要自定义消息的文本和位置。添加：

    4. ＆GT; 

    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;

答案 3 :(得分：0)

您的导入应如下所示。

import Highcharts from 'highcharts';
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
import HighchartsReact from 'highcharts-react-official';

NoDataToDisplay(Highcharts);

定义您的选项以显示noData消息。

const options = {
lang: {
      noData: props.noDataMessage,
    },
    noData: {
      style: {
        fontWeight: 'bold',
        fontSize: '15px',
        color: '#303030',
      },
    },
};

在高级图表中使用此选项。

<HighchartsReact
   highcharts={Highcharts}
   options={options}
/>
相关问题
最新问题