用多个系列对散点图高速图排序 [英] Sorting Scatter Highstock Chart with Multiple Series
问题描述
我试图使用股票图表来让我滑过时间同时更新x和y散点图。要充分理解我绘制这种情节类型的某些推理可能会有所帮助。 x在这种情况下是发动机负载百分比，而y是排气温度。
我得到这个错误是因为不管我如何对数据进行排序，因为我有两个x系列和highstock需要该数据根据x轴进行排序。正如你可以想象的那样，x1和x2不依赖于彼此，而且我有限的编程技巧让我在这里挠头。
一段js代码， m使用位于这里 - jsfiddle
Highcharts.stockChart（'container'，{
xAxis：{
标签：{
启用：false
}
}，
rangeSelector：{
buttons：[{
type：'day'，
count：1，
text：'1 Day'
}，{
type：'day'，
count ：3，
text：'3 Day'
}，{
type：'day'，
count：6，
text：'6 Days'
$ b类型：'ytd'，
text：'YTD'
}，{
类型：'year'，
count：1，
文本：'1y'
}，{
输入：'all'，
text：'All'
}]
}，
图表：{
类型：'scatter'，
reflow： false，
}，
tooltip：{
enabled：true，
}，
boost：{
useGPUTranslations：true，
usePreAllocated：true
}，
系列：[{
// groupPixelWdith：100000，
// turboThreshold：10，
id：'main-series'，
data：points.map（function（point）{
return [point [0]，point [1]，point [2]，point [1]]
}），
showInNavigator：false，
xAxis：1，
min：0，
keys：['x'，'y'， 'date'，'holdY']，
labels：{
enabled：false
}，
}，{
name：'null_Lower'，
xAxis：1，
标签：{
启用：false
}，
类型：'area'，
showInLegend：false，
fillOpacity：.5 ，
col或：'rgba（255,0,0,0.5）'，
data：[
[0,257]，
[10,276]，
[20,286 ]，
[30,290]，
[40,290]，
[50.0,291]，
[60.0,294]，
[70.0,304 ]，
[80.0,323]，
[90.0,354]
]
}，
{
xAxis：0，
标签：{
启用：false
}，
//最小值：0，
//最大值：1000，
data：points.map（函数（point）{
return [point [2]]; //，point [1]];
}），
showInNavigator：true，
enableMouseTracking：false，
color：'＃FF0000'，
showInLegend：false
}
]，
yAxis：{
title：{
enabled：true，
text：'Exhaust Cylinder Temperature'，
}，
相反：false，
标签：{
已启用：true
}，
最小值：100，
最大值：500
}，
xAxis：[{
// min：0，
// minRange：1000 * 3600 * 24，
类型：'linear'，
tickLength：0，
// tickLength：0，
标签：{
启用：false
}，
事件：{
setExtremes：function（e）{
var points = this.chart.get（'main-series'）。points;
points.forEach（function（point）{
point.update（{
y：e.min< = point.date&& point.date< = e.max？ point.holdY：
null
}，
false，false）;
}）;
//this.chart.redraw;
$ b} {
类型：'linear'
}]，
导航器：{
启用： true，
xAxis：{
// tickInterval：0
}，
}
}）;
我认为您应该创建两个不同的系列：
var seriesArr = [{
data：[]
}，{
data ：[]
}];
//创建新点并将它们添加到它们各自的系列
points.forEach（function（point）{
seriesArr [0] .data.push（[point [2 ]，point [0]]）;
seriesArr [1] .data.push（[point [2]，point [1]]）;
}）;
现场演示： http://jsfiddle.net/kkulig/qazkxary/
数组取第三个项目（timestamp）并将它作为两个点的x值。
处理Highcharts中的数据在这里解释： https://www.highcharts.com/docs/chart-concepts/series
您可能会觉得它有用。
I running into issues when attempting to sort a highstocks chart series. I continue to get a Highcharts Error #15. I understand why I'm getting this error but I'm looking for a way to get around it. I have a 3 element array as the following [[x],[y],[time]]
Im attempting use a stock chart to allow me to slide through time while updating x and y scatter plot. To fully understand what I'm plotting some reasoning for this plot type may be helpful. x in this case is engine load percent while y is exhaust temp.
I get the error because no matter how I sort the data because I have two x series and highstock requires that data be sorted according to the x-axis. As you can imagine, x1 and x2 are not dependent on one another and my limited programming skills have left me scratching my head here.
A js fiddle of the code I'm using is located here - jsfiddle
Thanks so much in advance for any help!
Highcharts.stockChart('container', {
xAxis: {
labels: {
enabled: false
}
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1 Day'
}, {
type: 'day',
count: 3,
text: '3 Day'
}, {
type: 'day',
count: 6,
text: '6 Days'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
chart: {
type: 'scatter',
reflow: false,
},
tooltip: {
enabled: true,
},
boost: {
useGPUTranslations: true,
usePreAllocated: true
},
series: [{
//groupPixelWdith: 100000,
//turboThreshold: 10,
id: 'main-series',
data: points.map(function(point) {
return [point[0], point[1], point[2], point[1]]
}),
showInNavigator: false,
xAxis: 1,
min: 0,
keys: ['x', 'y', 'date', 'holdY'],
labels: {
enabled: false
},
}, {
name: 'null_Lower',
xAxis: 1,
labels: {
enabled: false
},
type: 'area',
showInLegend: false,
fillOpacity: .5,
color: 'rgba(255,0,0,0.5)',
data: [
[0, 257],
[10, 276],
[20, 286],
[30, 290],
[40, 290],
[50.0, 291],
[60.0, 294],
[70.0, 304],
[80.0, 323],
[90.0, 354]
]
},
{
xAxis: 0,
labels: {
enabled: false
},
//min:0,
//max: 1000,
data: points.map(function(point) {
return [point[2]]; //, point[1]];
}),
showInNavigator: true,
enableMouseTracking: false,
color: '#FF0000',
showInLegend: false
}
],
yAxis: {
title: {
enabled: true,
text: 'Exhaust Cylinder Temperature',
},
opposite: false,
labels: {
enabled: true
},
min: 100,
max: 500
},
xAxis: [{
//min: 0,
//minRange: 1000 * 3600 * 24,
type: 'linear',
tickLength: 0,
//tickLength: 0,
labels: {
enabled: false
},
events: {
setExtremes: function(e) {
var points = this.chart.get('main-series').points;
points.forEach(function(point) {
point.update({
y: e.min <= point.date && point.date <= e.max ? point.holdY :
null
},
false, false);
});
//this.chart.redraw;
}
}
}, {
type: 'linear'
}],
navigator: {
enabled: true,
xAxis: {
//tickInterval: 0
},
}
});
I think that you should create two separate series like this:
var seriesArr = [{
data: []
}, {
data: []
}];
// create new points and add them to their respective series
points.forEach(function(point) {
seriesArr[0].data.push([point[2], point[0]]);
seriesArr[1].data.push([point[2], point[1]]);
});
Live demo: http://jsfiddle.net/kkulig/qazkxary/
For every element from your points array take the third item (timestamp) and make it an x value for two points.
Handling data in Highcharts is explained here: https://www.highcharts.com/docs/chart-concepts/series
You may find it useful.
这篇关于用多个系列对散点图高速图排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
