Question

我修改了highcharts实时数据代码，因此U可以从mysql数据库中读取值。

但是当程序必须绘制图形时，使用从db读取的值，不会添加任何点。

这些值以json格式通过requestdata函数作为数组接收。

我认为这部分代码存在问题：

chart.series[0].addPoint(point, true, shift);

因为，如果不是使用点，我会手动添加值，如4和5，这些点在图中正确显示。

这是我的index.php代码:(完整程序）

有谁知道我做错了什么？

提前致谢

路易斯

<!DOCTYPE html>
<html lang="en">
  <head>
 <script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="js/themes/gray.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

  </head>

  <body>
        <!-- 2. Add the JavaScript to initialize the live chart on document ready -->
    <script>
    var chart; // global

    /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {             // Defino la funcion requestData, la misma no se ejecuta en esta instancia
      $.ajax({                   // Llamo a la funcion ajax
        url: 'data.php',     
        dataType: "json",
          // Direccion a donde envio la peticion
        success: function(point) {       
          // Si la peticion es exitosa, recibo la data desde el servidor
          var series = chart.series[0],    // Se guarda la informacion de la serie en la variable series
            shift = series.data.length > 40; // Desplazo hacia la derecha cuando se se imprimen mas de 20 puntos. El grafico me permite visualizar hasta 20 puntos.

          // Grafico la serie en pantalla (en este caso particular, 1 solo punto)
          chart.series[0].addPoint(point, true, shift);

          // Luego de 1 segundo, se llama nuevamente a la funcion que desde el servidor nos trae un punto diferente para graficar. Esto es recursivo, se repite indefinidamente
          setTimeout(requestData, 1000);  
        },
        cache: false
      });
    }

    $(document).ready(function() {          // Es la primera funcion que se ejecuta (porque incluye el "ready"), establece las caracteristicas del grafico
      chart = new Highcharts.Chart({
        chart: {
         renderTo: 'live_graph',   // Indica donde renderiza el grafico (ver en el body)

          defaultSeriesType: 'spline',    // Tipo de Grafico

          events: {
            load: requestData       // Cuando finaliza de cargar el grafico, llama a la funcion "requestData"
          }
        },
        title: {
          text: 'Temperatura del Horno'      // Titulo del Grafico
        },
        xAxis: {
          categories: []
        },
        yAxis: {
          minPadding: 0.2, 
          maxPadding: 0.2,
          title: {
            text: 'Temperaturas',
            margin: 80
          }

        },


        series: [{
          name: 'Temperatura',        // Nombre de la serie de datos
          data: []              // Los datos de la serie. Al estar vacio, es porque los mismos vienen de otro lado
        }]
      });   
    });
    </script>
<br>
<br>
    <!-- Espacio reservado para el Grafico -->

    <div id="live_graph" style="width: 1100px; height: 400px; margin: 0 auto"></div>



  </body>
</html>

无法在从mysql数据库读取的高级实时数据中添加一个点

0 个答案: