动态多个Y轴存在问题。偶尔样条曲线会记录两个数据点并使样条曲线向上移动。 此代码位于可编程逻辑控制器内，该控制器采用“小部件适配器”，其中HTML单独处理。 我无可否认地是一个黑客，并设法得到我想要的结果非常接近。然而，我遇到了这个障碍，这些重复的点标记正在破坏作品。 欢迎任何建议。
// define javascript methods that will be called when widget need to be initialized or data updated.
// in these methods' context, beside jQuery, following variables are accessible:
// * this.elem - parent DOM element
// * this.datas - data object, you can access data by this.datas['data1'], this.datas['data2'] ... this.datas['data16'].
// data may be undefined if it is not binded in CPT
// [optional] if this method defined, it should return a array of required javascript files
// below is an example for highcharts:
//
this.requiredScripts = function() {
return ["../user_codes/highcharts/js/highcharts.js",
"../user_codes/highcharts/js/highcharts-more.js",
"../user_codes/highcharts/js/exporting.js"];
};
this.init = function() {
// PUT INITIALIZATION CODES BELOW
Highcharts.setOptions({
global: {
useUTC: false
}
});
$(this.elem).highcharts({
chart: {
//type: 'line',
animation: Highcharts.svg, // don't animate in old IE
duration:250,
marginRight: 250,
marginLeft: 125,
events: {
}
},
credits: { enabled: false },
title: {
text: 'Energy Valve'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
},
//yAxisyAxisyAxisyAxisyAxisyAxisyAxisyAxisyAxisyAxisyAxis
yAxis: [{//-------------------------------FLOW
yAxis:0,
min:0,
max:10,
startOnTick:false,
endOnTick:false,
title: {
text: 'Flow',
style:{
color: '#0b8dbc'
}
},
labels: {
format: '{value}gpm',
style: {
color:'#0b8dbc'
}
},
opposite:false
},{ //-----------------------------------Valve Position
yAxis:1,
min:0,
max:100,
startOnTick:false,
endOnTick:false,
title: {
text: 'Valve Position',
style:{
color: '#046804'
}
},
labels: {
format: '{value}%',
style: {
color: '#046804'
}
},
opposite:true
},{ //------------------------------- Diff Pressure
yAxis:2,
min:0,
max:20,
startOnTick:false,
endOnTick:false,
title: {
text: 'Diff Pressure',
style:{
color: 'rgb(255,124,14)'
}
},
labels: {
format: '{value}psi',
style: {
color: 'rgb(255,124,14)'
}
},
opposite:true
}],
legend: {
enabled:true,
layout: 'vertical',
align: 'left',
x: 110,
verticalAlign: 'top',
y: 37,
floating: false,
backgroundColor: 'rgba(252, 249, 237,0.52)'
},
exporting: {
enabled: false
},
//SeriesSeriesSeriesSeriesSeriesSeriesSeriesSeries
series: [{
//-------------------------------Flow
yAxis:0,
name: 'Flow',
color:'#0b8dbc',
type: 'spline',
lineColor:'#0b8dbc',
//fillColor:'rgba(174, 222, 239,0.2)',
marker: {
fillColor: '#aedeef',
lineWidth: 1,
lineColor: '#0878a0' // inherit from series
},
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 3) + 1)
});
}
return data;
}()),
},{
//-----------------------------------Valve Position
yAxis:1,
name: 'Valve Position',
color:'#046804',
type: 'spline',
lineColor:'#046804',
//fillColor:'rgba(174, 222, 239,0.2)',
marker: {
fillColor: '#5cd12e',
lineWidth: 1,
lineColor: '#046804' // inherit from series
},
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 3) + 1)
});
}
return data;
}()),
},{
//------------------------------- Diff Pressure
yAxis:2,
name: 'Diff Pressure',
color:'rgba(255, 124, 14,0.2)',
type: 'areaspline',
lineColor:'#ff7c0e',
fillColor:'rgba(255, 124, 14,0.2)',
marker: {
fillColor: '#eda66a',
lineWidth: 1,
lineColor: '#bc5905' // inherit from series
},
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 4) + 1)
});
}
return data;
}
()),
}]
});
};
this.update = function() {
//PUT DATA UPDATE CODES BELOW
var index = $(this.elem).data("highchartsChart");
var chart = Highcharts.charts[index];
var series0 = chart.series[0];
var series1 = chart.series[1];
var series2 = chart.series[2];
var data0 = this.readData("@GPM");
var data1 = this.readData("@POS");
var data2 = this.readData("@DP");
var x = (new Date()).getTime();
var y = parseFloat(data0);
var z = parseFloat(data1);
var c = parseFloat(data2);
series0.addPoint([x,y], true, true);
series1.addPoint([x,z], true, true);
series2.addPoint([x,c], true, true);
};
this.cleanup = function() {
//PUT CLEAN UP CODES BELOW
//JL 1-9-18
};
答案 0 :(得分：0)
正如我comment中提到的那样，这些数据值似乎是常规值而不是重复点;他们恰好是及时关闭事件。根据你的评论：
您可以分享哪些建议以减少更新频率？
分析您的代码，我们可以看到您每次调用this.update = function(){}时都会在图表中绘制新点。您的图表显示了这些非常接近的点，因为该函数肯定会以非固定的间隔调用，因此如果您经常更新，则x = (new Date()).getTime();值非常接近。
当然，解决此问题的一种方法是定期调用update函数，这样您就不会及时获得彼此太接近的值。
但是，如果你不能这样做（我建议你试试），另一种解决办法就是在验证调用update 。您可以将x变量存储在其他位置，以便在下次调用update时进行比较，从而实现此目的。
然后，您可以检查呼叫之间是否存在最短经过时间（例如60秒），然后决定是否要绘制点。这样，如果您无法处理update调用的频率，您就可以根除这些“重复”值。
编辑：为了举例说明第二个选项，我建议的内容如下所示。
首先，您必须将初始时间存储在我们可用于跟踪上次更新时间的变量中：
//Somewhere inside your initialization, capture the date you start the program
this.init = function() {
var previousUpdate = (new Date()).getTime();
//...the rest of your code...
}
之后，您可以在更新调用中使用该变量来查看是否绘图，如下所示：
//Now, on your update, we can compare time between calls
this.update = function() {
//get the time now
var x = (new Date()).getTime();
//now, compare if some minimum time interval has elapsed
var timeInterval = x - previousUpdate
//Remember to update your previous time for next comparison
previousUpdate = x
//if time ellapsed is more than, say, 1000 units (depends what units you want)
//then plot, else don't do anything
if(timeInterval > 1000){
//PUT DATA UPDATE CODES BELOW
var index = $(this.elem).data("highchartsChart");
var chart = Highcharts.charts[index];
var series0 = chart.series[0];
var series1 = chart.series[1];
var series2 = chart.series[2];
var data0 = this.readData("@GPM");
var data1 = this.readData("@POS");
var data2 = this.readData("@DP");
var y = parseFloat(data0);
var z = parseFloat(data1);
var c = parseFloat(data2);
series0.addPoint([x,y], true, true);
series1.addPoint([x,z], true, true);
series2.addPoint([x,c], true, true);
}
//else just do nothing :)
};
如果它们在时间上彼此足够远，您将只绘制到图表的点，然后您可以调整最小距离以满足您的需求（较小的方法允许频繁更新，反之亦然）。