我正在使用jqcharts。我有来自数据库的数据,价值不断更新。我希望在我的仪表上显示同样的东西。请帮我这个代码。 这是我显示我的仪表的代码。 并在针 - > values.v1是要更新的实时数据。
var values = { v1: 0};
$(document).ready(function () {
var background = {
type: 'linearGradient',
x0: 1,
y0: 1,
x1: 1,
y1: 0.5,
colorStops: [{ offset: 0, color: '#C4C4C4' },
{ offset:0.3,color:'black'}
]
};
var gradient1 = {
type: 'linearGradient',
x0: 0,
y0: 0.5,
x1: 1,
y1: 0.5,
colorStops: [{ offset: 0, color: '#C5F80B' },
{ offset: 1, color: '#6B8901'}]
};
var gradient2 = {
type: 'linearGradient',
x0: 0.5,
y0: 0,
x1: 0.5,
y1: 1,
colorStops: [{ offset: 0, color: '#FF3366' },
{ offset: 1, color: '#B2183E'}]
};
var anchorGradient = {
type: 'radialGradient',
x0: 0.5,
y0: 0.8,
r0: 0,
x1: 0.5,
y1: 0.8,
r1: 1,
colorStops: [{ offset: 0, color: '#797981' },
{ offset: 1, color: '#1C1D22'},
{offset:0.5, color:'#58575C'}
]
};
$('#jqRadialGauge').jqRadialGauge({
background: anchorGradient,
border: {
lineWidth: 3,
strokeStyle: '#595959',
padding: 16
},
shadows: {
enabled: true
},
anchor: {
visible: true,
fillStyle: anchorGradient,
radius: 0.10
},
tooltips: {
disabled: true,
highlighting: false
},
scales: [
{
minimum: 0,
maximum: 140,
startAngle: 140,
endAngle: 400,
majorTickMarks: {
length: 7,
lineWidth: 2,
interval: 20,
offset: 1,
strokeStyle: '#B9BDC0'
},
minorTickMarks: {
visible: false,
length: 8,
lineWidth: 2,
interval: 2,
offset: 0.84,
strokeStyle: 'white'
},
labels: {
visible:true,
orientation: 'horizontal',
interval: 10,
offset: 1.00,
strokeStyle:'white'
},
needles: [
{
value: values.v1,
type: 'triangle',
outerOffset: 1.5,
mediumOffset: 0.7,
width: 7,
fillStyle: '#C01211'
}
]
}
]
});
updateGauge();
});
这是用于提供实时数据的updateGauge函数。
function updateGauge() {
$(values).animate({
v1 :readLoop
},
{
duration: 10,
step: function () {
var scales = $('#jqRadialGauge').jqLinearGauge('option', 'scales');
scales[0].needles[0].value = this.v1;
$('#jqRadialGauge').jqLinearGauge('update');
},
complete: function () {
setTimeout('updateGauge()', 2000);
}
});
}
使用readLoop变量给出v1的值。它使用以下函数从数据库中获取值:
var readLoop ;
function read() {
$.get('http://localhost:7777/smist-test/get.php', function(data) {
console.log(data);
$('#speed').html(data);
})
}
readLoop =setInterval(read,1000);
在下图中,您可以看到针没有根据下面显示的值更新。
这就是我的问题所在。