我创建了一个Highcharts温度计，它可以动态更新每日最高温度、每日最低温度和当前温度。每隔5分钟，我的网络驱动器上就会生成一个CSV文件，该文件包含一行四列数据，从左到右依次为：timestamp、daily max、daily min和current temps。我为每个温度测量值编写了三个序列，我使用jQuery获取CSV数据值，构建一个数组，然后每隔三秒将这些值传递给相应的Highcharts序列。这段代码非常适合这一点，当生成新的CSV值时，指针每五分钟就发生变化，而无需刷新页面。并且它们可以在导出的图像上正确显示。我还在量规顶部放置了一个标签，它使用相同的jQuery数组更新并显示网页上CSV的时间戳。
我试图解决的问题是让我的动态时间戳标签显示在导出的图像上。时间戳与标尺一起显示在网页上，它在不刷新页面的情况下很好地更新，但是，时间戳不会显示在导出的图像上。我需要的是在此 Jmeter 的导出图像上显示动态时间戳。如果您以前遇到过这种情况，请告诉我/或者对如何解决此问题有任何建议。
这是我的代码的一个示例。请注意，这段代码在其当前状态下会导致文本“时间戳2”显示在导出的图像上，我希望在那里显示最新的时间戳。
<script defer type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'gauge',
name: 'Temp',
plotBackgroundColor: null,
plotBackgroundImage: null,
margin: [50, 50, 50, 50],
plotBorderWidth: 0,
plotShadow: false,
height: 500,
events: {
load: function() {
this.renderer.image('file location of this image', (((this.chartWidth / 2) - (this.plotHeight / 2)) + ((0.1062495 - (this.plotHeight * 0.0000245825)) * this.plotHeight)), //! x-coordinate
(((this.chartHeight / 2) - (this.plotHeight / 2)) + ((0.1062495 - (this.plotHeight * 0.0000245825)) * this.plotHeight)), //! y-coordinate
(this.plotHeight - ((0.212499 - (this.plotHeight * 0.000049165)) * this.plotHeight)), //!width
(this.plotHeight - ((0.212499 - (this.plotHeight * 0.000049165)) * this.plotHeight))) //!height
.attr({}).css({}).add();
this.renderer.text('text goes here', ((this.chartWidth - this.plotWidth) / 2), this.chartHeight - ((this.chartHeight - this.plotHeight) / 2) + 20).attr({}).css({
color: '#0000aa'
}).add();
this.renderer.text('text goes here', ((this.chartWidth - this.plotWidth) / 2), this.chartHeight - (this.chartHeight - this.plotHeight) / 2).attr({}).css({}).add();
this.myLabel = this.renderer.text(['Timestamp'], ((this.chartWidth - this.plotWidth) / 2), ((this.chartHeight - this.plotHeight) / 2) + 20).attr({}).css({}).add();
},
}
},
title: {
text: 'Temperature'
},
pane: {
startAngle: -150,
endAngle: 150,
background: {
backgroundColor: 'transparent',
borderColor: 'transparent',
},
},
// the value axis
yAxis: {
min: -70,
max: 120,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPositions: [ - 70, -60, -50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
rotation: 'auto'
},
title: {
text: 'Deg F'
},
plotBands: [{
from: -70,
to: -40,
color: '#FFFFFF' // white
},
{
from: -40,
to: 0,
color: '#f633ff' // green
},
{
from: 0,
to: 32,
color: '#0D0DDF' // blue
},
{
from: 32,
to: 80,
color: '#55BF3B' // yellow
},
{
from: 70,
to: 100,
color: '#DDDF0D' // yellow
},
{
from: 100,
to: 120,
color: '#DF5353' // red
}]
},
exporting: {
allowHTML: true,
sourceWidth: 1000,
sourceHeight: 1000,
chartOptions: {
chart: {
events: {
load: function() {
this.renderer.image('file location of this image', (((this.chartWidth / 2) - (this.plotHeight / 2)) + ((0.1062495 - (this.plotHeight * 0.0000245825)) * this.plotHeight)), //! x-coordinate
(((this.chartHeight / 2) - (this.plotHeight / 2)) + ((0.1062495 - (this.plotHeight * 0.0000245825)) * this.plotHeight)), //! y-coordinate
(this.plotHeight - ((0.212499 - (this.plotHeight * 0.000049165)) * this.plotHeight)), //!width
(this.plotHeight - ((0.212499 - (this.plotHeight * 0.000049165)) * this.plotHeight))) //!height
.attr({}).css({}).add();
this.renderer.text('text goes here', ((this.chartWidth - this.plotWidth) / 2), this.chartHeight - ((this.chartHeight - this.plotHeight) / 2) + 20).attr({}).css({
color: '#0000aa'
}).add();
this.renderer.text('text goes here', ((this.chartWidth - this.plotWidth) / 2), this.chartHeight - (this.chartHeight - this.plotHeight) / 2).attr({}).css({}).add();
this.myLabel = this.renderer.text(['Timestamp 2'], ((this.chartWidth - this.plotWidth) / 2), ((this.chartHeight - this.plotHeight) / 2) + 20).attr({}).css({}).add();
}
}
}
}
},
series: [{
type: 'gauge',
name: 'Current Temp',
color: 'black',
data: [0],
dial: {
backgroundColor: 'black',
borderWidth: 0,
baseWidth: 3,
topWidth: 1,
rearLength: '0%'
},
tooltip: {
valueSuffix: ' Deg F'
}
},
{
type: 'gauge',
name: 'Daily Max Temp',
color: 'red',
data: [0],
dial: {
backgroundColor: 'red',
borderWidth: 0,
baseWidth: 1,
topWidth: 1,
rearLength: '0%'
},
tooltip: {
valueSuffix: ' Deg F'
}
},
{
type: 'gauge',
name: 'Daily Min Temp',
color: 'blue',
data: [0],
dial: {
backgroundColor: 'blue',
borderWidth: 0,
baseWidth: 1,
topWidth: 1,
rearLength: '0%'
},
tooltip: {
valueSuffix: ' Deg F'
}
}]
},
function(chart) {
if (!chart.renderer.forExport) {
setInterval(function() {
var pointcurrent = chart.series[0].points[0];
var pointmax = chart.series[1].points[0];
var pointmin = chart.series[2].points[0];
jQuery.get('file location of my CSV',
function(data) {
const dataarray = data.split(",");
pointcurrent.update(parseFloat(dataarray[4]));
pointmax.update(parseFloat(dataarray[1]));
pointmin.update(parseFloat(dataarray[2]));
chart.myLabel.attr({
text: dataarray[0]
});
});
},
3000);
}
},
);
</script>
</div>
</body>
</html>我希望在 Jmeter 的导出图像上显示动态时间戳标签。在Web浏览器中，正确的时间戳在 Jmeter 上显示得很好，但在导出图像上不显示相同的时间戳。使用此代码可以很好地更新和显示动态系列数据。
1条答案
按热度按时间efzxgjgh1#
对于此配置，您可以在导出到图像的过程中导出实际时间戳，这是您正在寻找的解决方案吗？
也可以将时间定义为单独的示例：
https://api.highcharts.com/class-reference/Highcharts.Time
演示：https://jsfiddle.net/BlackLabel/mbocn91h/