0
このチュートリアルhttps://www.youtube.com/watch?v=9zxfoamp-xcに基づいてMySQLデータベースから更新されたデータで動的チャートを作成しようとしましたが、何も画面に表示されません。いずれのチャートも生成されていません。MySQLデータベースからのデータでハイチャートを使用する動的チャート
datos.php
<?php
$pdo=new PDO("mysql:dbname=basededatoslocal;host=127.0.0.1","root","");
if(isset($_GET['Consultar']) && $_GET['Consultar']=='1'){
$statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id DESC LIMIT 0,1");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results);
echo $json;
}
else
{
// Buscar Todos los datos
$statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id ASC");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results);
echo $json;
}
?>
JSON出力
[{ "X"： "0"、 "Y"： "2"}、{ "X"： "5 "、" y "：" 3 "}、{" x "：" 10 "、" y "：" 3 "}、{" x "：" 15 "、" y "：" 3 "}、{" x "" 20 "、" y "：" 4 "}、{" x "：" 30 "、" y "：" 3 "}、{" x "：" 35 "、" y "：" 5 "} 、{ "X"： "40"、 "Y"： "4"}、{ "X"： "45"、 "Y"： "3"}]
index.htmlを
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function() {
$(document).ready(function() {
var ultimox;
var ultimoy;
$.ajax({
url: "datos.php",
type: 'get',
success: function(DatosRecuperados) {
$.each(DatosRecuperados, function(i,o){
if (o.x) {DatosRecuperados[i].x = parseInt(o.x);}
if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
});
setx(DatosRecuperados[(DatosRecuperados.length)-1].x);
sety(DatosRecuperados[(DatosRecuperados.length)-1].y);
$('#container').highcharts({
chart:{
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {load: function() {series = this.series[0];}}
},
title:{text: 'Live random data'},
xAxis:{tickPixelInterval: 150},
yAxis:{title: {text: 'Value'},
plotLines: [{value: 0,width: 1,color: '#808080'}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.numberFormat(this.x, 2) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{ name: 'Random data', data:DatosRecuperados}]
});
}});
});
setInterval(function() {
$.get("datos.php?Consultar=1", function(UltimosDatos) {
var varlocalx=parseFloat(UltimosDatos[0].x);
var varlocaly=parseFloat(UltimosDatos[0].y);
if((getx()!=varlocalx)&&(gety()!=varlocaly)){
series.addPoint([varlocalx, varlocaly], true, true);
setx(varlocalx);
sety(varlocaly);
}
});}, 1000);
function getx(){return ultimox;}
function gety(){return ultimoy;}
function setx(x){ultimox=x;}
function sety(y){ultimoy=y;}
});
</script>
</body>
私は誰かが私の方法で私を助けることができると思います。
おかげで、このチュートリアルのポール
その理由は値のタイプです。あなたのような数字ではありません。 json_encode（）関数でjson_numeric_checkフラグを設定します。 –
お返事ありがとうございます。私はdatos.phpの行を "\t \t \t $ json = json_encode（$ results、JSON_NUMERIC_CHECK）;"に変更しましたが、変更されていません。 – pkosmicki