¿Cómo hacer que el gráfico de líneas de Highcharts lea los datos en formato json de la base de datos y los muestre en el gráfico?
Highcharts y Ajax se combinan para lograr gráficos de actualización en tiempo real - versión PHP
URL de referencia: enlace web
Sitio web oficial de referencia: enlace web
I. Entorno y sql
Lenguaje de desarrollo: php Jquery
Base de datos: mysql
Estructura de la tabla de datos:
Declaración SQL : usar? prueba;
CREATE?TABLE?`test`?( `id`?int(11)?NOT?NULL?AUTO_INCREMENT, `datetime`?char(10)?NOT?NULL, ` data`? double?DEFAULT?NULL, PRIMARY?KEY?(`id`))?p>
)?ENGINE=InnoDB?AUTO_INCREMENT=31?DEFAULT?CHARSET=latin1;
insertar ?en?prueba?(fechahora,datos)?valores?
('2013-10-01', 20.5), ('2013-10-02', 23.7), ('2013 -10- 03', 22.4), ('2013-10-04', 29.0), ('2013-10-05', 22.2),
('2013-10-06', 22.6 ), ('2013-10-07'. 26.9), ('2013-10-08', 28.0), ('2013-10-09', 24.1), ('2013-10-10', 27.1),
('2013-10-11', 23.6), ('2013-10-12', 28.8), ('2013-10-13'. 22.4), ('2013-10-14 ', 23.6 ), ('2013-10-15', 24.2),
('2013-10-16', 22.6), ('2013-10-17', 26.2), (' 2013-10-18', 28.2), ('2013-10-19'. 21.7), ('2013-10-20', 25.2),
('2013-10-21', 25.0), ('2013-10-22', 21.6), ('2013-10-23', 25.7), ('2013-10-24', 21.7), ('2013-10-25'. 22.2) ,
('2013-10-26', 25.6), ('2013-10-27', 26.2), ('2013-10-28', 26.0), ('2013-10- 29', 23.2), ('2013-10-30', 22.4);
Dos ideas básicas y código
Ideas básicas
Estructura del archivo (puede se discutirá más adelante Acceso de descarga)
Código principal:
1. test.html
lt;! DOCTYPE?HTMLgt;
lt;htmlgt;
lt;headgt;
lt;titlegt;Testlt;/titlegt;
lt;meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?
lt;script?type="texto
/javascript"?src="js/jquery-1.8.3.min.js"gt;lt;/scriptgt;
lt;script? {
gráfico:?{
renderTo: ?' contenedor',
tipo: ? spline',
},
título: ?{
text:?Curva de temperatura en tiempo real',
x:?-20?//centro
},
xAxis:?{} ,
yEje:?{
título:?{
texto:?Temperatura?(°C)'
},
plotLines: ?{
valor: ?0,
ancho: ?1,
color: ?' p>
}]
},
serie:?{
nombre:? Temperatura',
}],
p>información sobre herramientas: ?{
valueSuffix: ?°C'
},
plotOptions: ?{
spline:?{
dataLabels:?{
enabled:?true
},
animación:?false,
},
},
},
};
//Función inicial, utilizada para configure el temporizador y obtenga datos regularmente
$(function()?{
queryData(0);
var?i?=?0;
var?timer?=?setInterval(function()?{
i ;
if(i?gt;=?3)?{
i ?=?0;
}
queryData(i);
},?3000);
/ /dejar de actualizar
$("botón").click(función()?{
clearInterval(temporizador);
});
} );
var?[];
var?[];
//Ajax?Obtenga datos y analícelos para crear gráficos Highcharts
función?queryData(índice)?{
$.ajax({
url：?' getDatas.php?index='? ?índice,
tipo: ?get',
tipo de datos: ? "json",
éxito: ?función(datos)?{
$ .cada(datos ,?función(i,?n)?{
categorías[i]? =?n[1];
datos[i]? =?n[ 2]?* ?1;
});
opciones.xAxis.categorías?=?categorías;
opciones.seri
es[0].data?=?datas;
chart?=?new?Highcharts.Chart(options);
}
});
}
lt;/scriptgt;
lt;/headgt;
lt;bodygt;
lt ;div?id="contenedor "?style="ancho mínimo: 800px; alto: 400px; "gt;lt;/divgt;
lt;p?align=centergt;
lt;buttongt;Detener actualizaciónlt;/buttongt;
lt;/pgt;
lt;/bodygt;
lt;/htmlgt;
lt;/pgt;
lt;/htmlgt;
lt;/pgt; p>
Copiar código
2. getDatas.php
lt;?php
$db_name?=?" prueba";
$db_host?=?" localhost";
$db_user?=?" raíz";
$db_pass?=?" raíz";
$index?=?0;
si (isset($_GET['index']))?{
$index?=?(int)$_GET['index'];
}?
$link?=?mysql_connect($db_host, $db_user, $db_pass)?o?die("¿No se puede?conectar?DB") ;
$db?=?mysql_select_db($ db_name);
mysql_query("set?names?utf8");
$resultado?=?mysql_fetch_row (mysql_query("select?count(*)?from?test") );
$páginas?=?((int)($resultado[0]))/10;
if($index?gt;?($páginas-1) )?{
$index?=?($pages-1);
}
$select?=?" select?*?from?test ?límite?". ($index*10).";
$select?=?10";
$resultado?=?mysql_query($select);
$datos?=?array();
mientras($fila?=?mysql_fetch_row($resultado))? {
$datos[]?$fila;
}
echo?json_encode($datas); gt;
Tercer paso, ¿descargar recursos?
Descarga del disco de red Baidu: