jquery - 从数据库到jqchart的实时数据

Question

我正在使用 jqcharts。我有来自数据库的数据，并且值不断更新。我想在我的仪表上显示同样的东西。请帮我处理这段代码。这是我显示仪表的代码。在 needles --> 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);
            }
        });
     }

v1 的值使用 readLoop 变量给出。它使用以下从数据库中获取值的函数：

var readLoop ;
 function read() {

$.get('http://localhost:7777/smist-test/get.php', function(data) {
      console.log(data);
 $('#speed').html(data);

   })
}
readLoop =setInterval(read,1000);

在下图中，您可以看到针没有根据下面显示的值更新。

车速表

这就是我的问题所在。