Question

我有一个API，可在30秒内自动生成数字值。数字值范围是1到1000，也可以生成null值。

这是图片：（右键单击图片并打开新标签以查看大图）该图看起来不错，但是从API获取空值后，看起来每个空值都没有在时间上显示时间，如下图所示。

您可以看到较大的图片，第一个空时间（带下划线的时间）是03:23:30，最后到03:51:00，相差28分钟。

这是代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import moment from 'moment-timezone';

const getConfig = data => ({
    chart: {
        type: 'area'
    },
    rangeSelector: {
        allButtonsEnabled: false,
        buttons: [{
            type: 'minute',
            count: 5,
            text: '5m'
        }, {
            type: 'minute',
            count: 30,
            text: '30m'
        }, {
            type: 'hour',
            count: 1,
            text: '1h'
        }, {
            type: 'hour',
            count: 3,
            text: '3h'
        }, {
            type: 'hour',
            count: 6,
            text: '6h'
        }, {
            type: 'day',
            count: 1,
            text: '1d'
        }, {
            type: 'week',
            count: 1,
            text: '1w'
        }, {
            type: 'all',
            text: 'All'
        }],     
        selected: 1
    },
        animation: {
            duration: 2000
        },
    labelStyle: {
        display: 'none'
    },
    title: {
        text: 'Highcharts',
    },
    time: {
        getTimezoneOffset: function (timestamp) {
            var zone = 'Asia/Makassar',
                timezoneOffset = -moment.tz(timestamp, zone).utcOffset();
            return timezoneOffset;
        }
    },
    xAxis: {
        tickInterval: 1000,
        showEmpty: true
    },
    yAxis: {
        allowDecimals: false,
        labels: {
            format: '{value}'
        }
    },
    tooltip: {
        formatter: function () {
            return 'Value: <b>' + this.y + '</b>';
        }
    },
    area: {
        stacking: 'normal'
    },
    series: [
        {
            name: 'Values',
            data: data,
            connectNulls: false
        },
    ],
});

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataResults: [],
        };
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        fetch('http://myapi.net/graphs/data')
            .then(res => res.json())
            .then(data => {
                this.setState({
                    dataResults: data,
                });
            });
    };

    render() {
        const { dataResults } = this.state;
        const chartConfig = getConfig(dataResults);
        return <ReactHighstock config={chartConfig} />;
    }
}

export default App;

render(<App />, document.getElementById('root'));

如上图所示，如何在30秒内显示所有空值，使28分钟之间没有时差？

高图未在每个空值处显示时间

0 个答案: