javascript — невозможно построить график с использованием массива JSON

Question

javascript — невозможно построить график с использованием массива JSON

У меня есть массив JSON, содержащий «etime» в чч: мм: сс формат и «Datar«в десятичном формате. Я хочу построить простую линейную диаграмму. Но, как есть двоеточия (т.е. :) в моих данных JSON вызов JSON.parse () не будет работать. Все, что я хочу, это передать массив JSON из PHP в переменные JavaScript.

<?php
$url ="../getShiftData";
$clientid ="12021993";
$shiftid = "2";
$machineid = "2222";
$edate = "2017-04-05";
$ch = curl_init( $url );
# Setup request to send json via POST.
$payload = json_encode( array( "clientid"=> $clientid, "shiftid" =>  $shiftid, "machineid" => $machineid, "edate" => $edate) );
//echo $payload;
curl_setopt( $ch, CURLOPT_POSTFIELDS, $payload );
curl_setopt( $ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));
# Return response instead of printing.
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
# Send request.
$result = curl_exec($ch);
curl_close($ch);
# Print response.
$strArr = json_decode($result,true);
$len = count($strArr);
$shiftData = array();

$xarr = array();
$yarr = array();
for ($i=0; $i <$len ; $i++) {
$xarr[$i]=$strArr[$i]["etime"];
$yarr[$i]=$strArr[$i]["datar"];
}

$xarr = implode(",",$xarr);
$yarr = implode(",",$yarr);?>
<html>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="graphDiv"></div>
<script>
var xarr = "<?php echo $xarr; ?>";
var yarr = "<?php echo $yarr; ?>";
var jay = xarr.replace(/:/g, '\\\\:');
console.log(jay);
var x1 = JSON.parse("[" + jay + "]");
var y1 = JSON.parse("[" + yarr + "]");
var trace1 = {
x: x1,
y: y1,
type: 'scatter',
mode: 'lines',
};

var data = [trace1];

var layout = {
title: 'Sales Growth',
xaxis: {
title: 'Year',
showgrid: false,
zeroline: false
},
yaxis: {
title: 'Percent',
showline: false
}
};

Plotly.newPlot(graphDiv, data, layout);

// deprecated: calling plot again will add new trace(s) to the plot,
// but will ignore new layout.
</script>
</body>
</html>

$ xarr выглядит так:

["20:23:00","20:23:01","20:23:02"]

$ yarr выглядит так:

["0.123456","0.342323","0.532423"]

2

javascript json php plotly

Решение

По вопросам рекламы [email protected]

Accepted Answer

Используйте PHP json_encode () функция для отображения массивов как JSON. Тогда нет необходимости анализировать их в коде JavaScript.

<script>
var xarr = <?php echo json_encode($xarr); ?>;
var yarr = <?php echo json_encode($yarr); ?>;
var trace1 = {
x: xarr,
y: yarr,
type: 'scatter',
mode: 'lines',
};

Смотрите демонстрацию этого в это phpfiddle.

HTML / JS Вывод:

  var xarr = ["20:23:00","20:23:01","20:23:02"];
var yarr = ["0.123456","0.342323","0.532423"];
var trace1 = {
x: xarr,
y: yarr,
type: 'scatter',
mode: 'lines',
};

var data = [trace1];

var layout = {
title: 'Sales Growth',
xaxis: {
title: 'Year',
showgrid: false,
zeroline: false
},
yaxis: {
title: 'Percent',
showline: false
}
};

Plotly.newPlot(graphDiv, data, layout);

// deprecated: calling plot again will add new trace(s) to the plot,
// but will ignore new layout.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="graphDiv"></div>

2

Другие решения

Других решений пока нет …

Источник