我目前正在使用 highstock 来绘制基于全天时间的可用项目总数(然后实时更新)。
如果项目总数的两个变化同时发生,在 highstock 我得到一个垂直条的差异:
因此,在我的示例图像中,我们从 4299 个事物开始,然后删除了 53 个项目并添加了 50 个(技术上是同时,但是是两个不同的事务并且是两个点)。净差为-3。(或者换句话说,我得到 {x: 5:44:15 and y: 4246, change: -53}, {x: 5:44:15, y: 4296, change: 50})。
所以我的问题是:在 highstock 中是否可以合并这些点以摆脱垂直条并使用 4296 作为显示值?我希望然后我可以使用工具提示格式化程序循环“this.points”并在工具提示中显示 -53 的变化和 50 的变化,以便用户可以看到导致 -3 的净变化的原因。
如果这不可能,我将自己合并这些点并传递点中的所有相关信息以生成我想要的工具提示(和图表外观),但想看看我是否可以利用所有功能highstock 首先 - 并将这些点分开。
谢谢!
编辑::
new Highcharts.StockChart({
chart : {
renderTo : 'realTimeChart',
zoomType: 'x',
backgroundColor: '#feffdd',
style: {
fontFamily: 'Segoe UI'
},
type: 'spline'
},
plotOptions: {
area: { animation: false },
arearange: { animation: false },
areaspline: { animation: false },
areasplinerange: { animation: false },
bar: { animation: false },
column: { animation: false },
columnrange: { animation: false },
gauge: { animation: false },
line: { animation: false },
pie: { animation: false },
scatter: { animation: false },
series: { animation: false },
spline: { animation: false }
},
xAxis: {
ordinal: false
},
tooltip: {
animation: false,
formatter: function() {
var p = '';
p += '<span style="font-size: 9px;">' + Highcharts.dateFormat('%A, %b %e, %Y %H:%M:%S', this.x) +'</span><br/>';
$.each(this.points, function(i, point){
p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y +'</b>';
if (point.point.where) {
p += '<br />' + point.point.where + ' changed by ' + point.point.change + (point.point.who ? ' (' + point.point.who + ')' : '');
}
});
return p;
}
},
rangeSelector: {
buttons: [{
count: 30,
type: 'minute',
text: '30M'
}, {
count: 1,
type: 'hour',
text: '1H'
}, {
count: 6,
type: 'hour',
text: '6H'
}, {
type: 'all',
text: 'Day'
}],
inputEnabled: false,
selected: 1
},
exporting: {
enabled: false
},
series : [{
name : 'Available',
data : data,
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}]
数据采用我之前显示的格式,除了 x 实际上是自纪元以来的毫秒数:
data = [
{x: 123456789, y: 2000, where: 'Location', change: 40, who: 'Joe'},
{x: 123456789, y: 1960, where: 'Location', change: -40, who: 'Bob'},
...
];