具有更多数据绘制连续性的连续更新高图不可见，因此我们需要图形中心的连续性
The continuous update highcharts with more data plotting the continuity is not visible so we need that continuity in the centre of the graph
问题：目前我正在尝试构建一个实时流图，它将显示 0.5 小时到 3 小时范围内的数据。所以图表不断更新，但它在图表的最右侧更新。
需求：我的需求是想做同样的事情，但是要在图的中心位置做。实时流应该在图表的中心更新，右侧应该包含未来的时间值，没有针对它绘制数据。
我尝试根据未来的时间戳值绘制空数据，但 Stockchart 不接受此类数据并且不显示任何内容。
Here is a JSFiddle,重要部分:
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], true, true);
}, 1000);
var series2 = this.series[2];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series2.addPoint([x, y], true, true);
}, 1000);
}
}
},
I tried plotting null data against future timestamp values, but
Stockchart does not accept such kind of data and displays nothing.
这是因为默认情况下 xAxis.ordinal = true 这意味着点在图表中等距分布，而不管实际时间或它们之间的 x 距离。解决方案很简单，设置 xAxis.ordinal = false 并设置轴极值以在图形线之前显示未来时间。查看下面发布的演示和代码。
var power = [],
speed = [],
torque = [],
i = 0;
let time = 1542278447000;
for (i; i < 100; i += 1) {
let torqueValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;
let speedValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;
powerValue = torqueValue * speedValue
time = time + 1000
torque.push([
time, // the date
torqueValue // the torque
]);
speed.push([
time, // the date
speedValue // the speed
]);
power.push([
time, // the date
powerValue // the power
]);
}
// create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var chart = this,
multiplier,
dataLength,
x,
y;
setInterval(function() {
chart.series.forEach(function(series) {
multiplier = series.dataMax;
dataLength = chart.series[0].xData.length;
x = chart.series[0].xData[dataLength - 1] + 1000;
y = Math.round(Math.random() * multiplier);
series.addPoint([x, y], false, true);
});
chart.xAxis[0].setExtremes(null, x + 15000);
}, 1000);
}
}
},
rangeSelector: {
enabled: false,
selected: 2
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: ''
},
exporting: {
enabled: false
},
subtitle: {
text: ''
},
xAxis: {
title: {
text: 'Time'
},
ordinal: false
},
yAxis: [{
opposite: false,
startOnTick: true,
endOnTick: true,
labels: {
align: 'left',
x: -22
},
title: {
text: 'Torque',
x: -15
},
height: '30%',
offset: 0,
lineWidth: 2,
resize: {
enabled: true
}
}, {
opposite: false,
labels: {
align: 'left',
x: -22
},
title: {
text: 'Speed',
x: -15
},
top: '33%',
height: '30%',
offset: 0,
lineWidth: 2
}, {
opposite: false,
labels: {
align: 'left',
x: -22
},
title: {
text: 'Power',
x: -15
},
top: '66%',
height: '30%',
offset: 0,
lineWidth: 2
}],
legend: {
enabled: true
},
tooltip: {
split: true
},
credits: {
enabled: false
},
plotOptions: {
series: {}
},
series: [{
color: '#77787b',
type: 'spline',
name: 'Torque',
id: 'Power',
zIndex: 2,
data: torque
}, {
color: '#335572',
type: 'spline',
name: 'Speed',
id: 'Speed',
data: speed,
yAxis: 1
}, {
color: '#ee4650',
type: 'spline',
name: 'Power',
id: 'Power',
data: power,
yAxis: 2
}]
});
.header {
padding: 20px 20px 10px 0px;
width: 100%;
display: flex;
font-size: 16px;
color: #5e5e5e;
font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'
}
span {
width: 50%;
font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'
}
span:last-child {
text-align: right;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/stock/indicators/volume-by-price.js"></script>
<div class='header'>
<span>
Date: 15/11/2018
</span>
<span>
Thrust: 3079.21 N
</span>
</div>
<div id="container" style="height: 500px; min-width: 310px"></div>
演示：
API参考：
添加
如果你想让它在启用导航器的情况下工作，也在导航器 xAxis 上设置相同的极值，然后重绘图表 (chart.redraw())。请注意，如果您有 navigator.adaptToUpdatedData = false.
，它将正常工作
代码：
chart: {
events: {
load: function() {
var chart = this,
offset = 15000,
multiplier,
dataLength,
x,
y,
min,
max;
setInterval(function() {
chart.series.forEach(function(series) {
multiplier = series.dataMax;
dataLength = chart.series[0].xData.length;
x = chart.series[0].xData[dataLength - 1] + 1000;
y = Math.round(Math.random() * multiplier);
series.addPoint([x, y], false, true);
});
min = chart.xAxis[0].userMin || null;
min = min < chart.xAxis[0].dataMin ? null : min;
max = x + offset;
chart.xAxis[0].setExtremes(min, max, false);
chart.navigator.xAxis.setExtremes(min, max, false);
chart.redraw();
}, 1000);
}
}
}
演示：
API参考：
问题：目前我正在尝试构建一个实时流图，它将显示 0.5 小时到 3 小时范围内的数据。所以图表不断更新，但它在图表的最右侧更新。
需求：我的需求是想做同样的事情，但是要在图的中心位置做。实时流应该在图表的中心更新，右侧应该包含未来的时间值，没有针对它绘制数据。
我尝试根据未来的时间戳值绘制空数据，但 Stockchart 不接受此类数据并且不显示任何内容。
Here is a JSFiddle,重要部分:
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], true, true);
}, 1000);
var series2 = this.series[2];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series2.addPoint([x, y], true, true);
}, 1000);
}
}
},
I tried plotting null data against future timestamp values, but Stockchart does not accept such kind of data and displays nothing.
这是因为默认情况下 xAxis.ordinal = true 这意味着点在图表中等距分布，而不管实际时间或它们之间的 x 距离。解决方案很简单，设置 xAxis.ordinal = false 并设置轴极值以在图形线之前显示未来时间。查看下面发布的演示和代码。
var power = [],
speed = [],
torque = [],
i = 0;
let time = 1542278447000;
for (i; i < 100; i += 1) {
let torqueValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;
let speedValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;
powerValue = torqueValue * speedValue
time = time + 1000
torque.push([
time, // the date
torqueValue // the torque
]);
speed.push([
time, // the date
speedValue // the speed
]);
power.push([
time, // the date
powerValue // the power
]);
}
// create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
var chart = this,
multiplier,
dataLength,
x,
y;
setInterval(function() {
chart.series.forEach(function(series) {
multiplier = series.dataMax;
dataLength = chart.series[0].xData.length;
x = chart.series[0].xData[dataLength - 1] + 1000;
y = Math.round(Math.random() * multiplier);
series.addPoint([x, y], false, true);
});
chart.xAxis[0].setExtremes(null, x + 15000);
}, 1000);
}
}
},
rangeSelector: {
enabled: false,
selected: 2
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: ''
},
exporting: {
enabled: false
},
subtitle: {
text: ''
},
xAxis: {
title: {
text: 'Time'
},
ordinal: false
},
yAxis: [{
opposite: false,
startOnTick: true,
endOnTick: true,
labels: {
align: 'left',
x: -22
},
title: {
text: 'Torque',
x: -15
},
height: '30%',
offset: 0,
lineWidth: 2,
resize: {
enabled: true
}
}, {
opposite: false,
labels: {
align: 'left',
x: -22
},
title: {
text: 'Speed',
x: -15
},
top: '33%',
height: '30%',
offset: 0,
lineWidth: 2
}, {
opposite: false,
labels: {
align: 'left',
x: -22
},
title: {
text: 'Power',
x: -15
},
top: '66%',
height: '30%',
offset: 0,
lineWidth: 2
}],
legend: {
enabled: true
},
tooltip: {
split: true
},
credits: {
enabled: false
},
plotOptions: {
series: {}
},
series: [{
color: '#77787b',
type: 'spline',
name: 'Torque',
id: 'Power',
zIndex: 2,
data: torque
}, {
color: '#335572',
type: 'spline',
name: 'Speed',
id: 'Speed',
data: speed,
yAxis: 1
}, {
color: '#ee4650',
type: 'spline',
name: 'Power',
id: 'Power',
data: power,
yAxis: 2
}]
});
.header {
padding: 20px 20px 10px 0px;
width: 100%;
display: flex;
font-size: 16px;
color: #5e5e5e;
font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'
}
span {
width: 50%;
font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'
}
span:last-child {
text-align: right;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/stock/indicators/volume-by-price.js"></script>
<div class='header'>
<span>
Date: 15/11/2018
</span>
<span>
Thrust: 3079.21 N
</span>
</div>
<div id="container" style="height: 500px; min-width: 310px"></div>
演示：
API参考：
添加
如果你想让它在启用导航器的情况下工作，也在导航器 xAxis 上设置相同的极值，然后重绘图表 (chart.redraw())。请注意，如果您有 navigator.adaptToUpdatedData = false.
代码：
chart: {
events: {
load: function() {
var chart = this,
offset = 15000,
multiplier,
dataLength,
x,
y,
min,
max;
setInterval(function() {
chart.series.forEach(function(series) {
multiplier = series.dataMax;
dataLength = chart.series[0].xData.length;
x = chart.series[0].xData[dataLength - 1] + 1000;
y = Math.round(Math.random() * multiplier);
series.addPoint([x, y], false, true);
});
min = chart.xAxis[0].userMin || null;
min = min < chart.xAxis[0].dataMin ? null : min;
max = x + offset;
chart.xAxis[0].setExtremes(min, max, false);
chart.navigator.xAxis.setExtremes(min, max, false);
chart.redraw();
}, 1000);
}
}
}
演示：
API参考：