خرید بک لینک

Vote count: 0

I'm working with react-highcharts. It works perfectly except nodata state. I need to display 'No data available' message when chart has empty data.

I have check no-data-to-display.js of official highcharts but it doesn't work with React. I would like to make a result like this: 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() {
        retu [
        '#04a5af', '#4a6cb4', '#2d4665', '#76b5db', '#b4dcee','#cae9de','#24a9b2','#48d0ae','#2a2b32', '#5065ae'
        ]
    }

    componentWillReceiveProps(newProps) {
        this.setState(this._getInitialState(newProps));
    }

    _getInitialState(props) {
        retu {
            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'
                    },
                    alteateGridColor: '#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() {


        retu (
            <div refs="wa-chart">
                <Highcharts config={this.state.chartConfig} ref="chart" isPureConfig={true} />
            </div>);
    }
}



export default MyChart;

I am using react 0.13.3, react-highcharts version 3.0.0 and highcharts-no-data-to-display version 0.1.2

asked 2 mins ago

برچسب: نویسنده: استخدام کار تاريخ: شنبه 8 خرداد 1395 ساعت: 14:36

صفحه بندی