具有多个系列的动态更新的 highstock 中的对齐问题
Alignment issue in dynamically updated highstock having multiple series
我正在创建一个包含 2 个系列的动态更新 highstock 图表,但在开始时一个系列呈现在错误的位置。当我在导航器中调整选择的大小时,系列又回到了正确的位置。
这是 highstock 的配置:
Highcharts.setOptions({
global: {
useUTC: false
}
});
var groupingUnits = [['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
['second',[1, 2, 5, 10, 15, 30]],
['minute',[1, 2, 5, 10, 15, 30]],
['day',[1]]
];
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, false);
series1.addPoint([x, y], true, false);
}, 500);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1min'
},
{
count: 3,
type: 'minute',
text: '3min'
}, {
count: 5,
type: 'minute',
text: '5min'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3
},
exporting: {
enabled: false
},
title: {
text: 'Live Chart'
},
yAxis: [
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Line'
},
height: '60%',
lineWidth: 2,
resize: {
enabled: true
}
},
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [
{
type: 'line',
name: 'OHLC',
data: [[]],
dataGrouping: {
units: groupingUnits
}
},
{
type: 'column',
name: 'Volume',
data: [[]],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}
]
});
我为此创建了一个 fiddle:
https://jsfiddle.net/xu058sgp/23/
我曾尝试更改 yAxis 的高度和顶部 属性,但似乎无法解决此问题。我不确定,但这可能是由于数据更新的频率所致。
谁能指出我在这里做错了什么。
作为解决方法,您可以初始化系列,然后在添加自己的点之前删除点。
初始化:
series: [{
type: 'line',
name: 'OHLC',
data: [0], //added this 0
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: [0], //added this 0
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
然后,在添加新点之前删除点:
events: {
load: function () {
// set up the updating of the chart each second
var chart = this
var series = this.series[0];
var series1 = this.series[1];
//Remove 0 data
series.setData([], false); //false to avoid redrawing, so we only redraw once per update
series1.setData([], false);
//update graph
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, false);
series1.addPoint([x, y], false, false);
//redraw graph
chart.redraw();
}, 500);
}
}
我正在创建一个包含 2 个系列的动态更新 highstock 图表,但在开始时一个系列呈现在错误的位置。当我在导航器中调整选择的大小时,系列又回到了正确的位置。 这是 highstock 的配置:
Highcharts.setOptions({
global: {
useUTC: false
}
});
var groupingUnits = [['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
['second',[1, 2, 5, 10, 15, 30]],
['minute',[1, 2, 5, 10, 15, 30]],
['day',[1]]
];
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, false);
series1.addPoint([x, y], true, false);
}, 500);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1min'
},
{
count: 3,
type: 'minute',
text: '3min'
}, {
count: 5,
type: 'minute',
text: '5min'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 3
},
exporting: {
enabled: false
},
title: {
text: 'Live Chart'
},
yAxis: [
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Line'
},
height: '60%',
lineWidth: 2,
resize: {
enabled: true
}
},
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [
{
type: 'line',
name: 'OHLC',
data: [[]],
dataGrouping: {
units: groupingUnits
}
},
{
type: 'column',
name: 'Volume',
data: [[]],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}
]
});
我为此创建了一个 fiddle: https://jsfiddle.net/xu058sgp/23/
我曾尝试更改 yAxis 的高度和顶部 属性,但似乎无法解决此问题。我不确定,但这可能是由于数据更新的频率所致。 谁能指出我在这里做错了什么。
作为解决方法,您可以初始化系列,然后在添加自己的点之前删除点。
初始化:
series: [{
type: 'line',
name: 'OHLC',
data: [0], //added this 0
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: [0], //added this 0
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
然后,在添加新点之前删除点:
events: {
load: function () {
// set up the updating of the chart each second
var chart = this
var series = this.series[0];
var series1 = this.series[1];
//Remove 0 data
series.setData([], false); //false to avoid redrawing, so we only redraw once per update
series1.setData([], false);
//update graph
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, false);
series1.addPoint([x, y], false, false);
//redraw graph
chart.redraw();
}, 500);
}
}