我有一个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分钟之间没有时差?