2017-04-07 88 views
2

情節主線圖表I有含有HH JSON數組 「ETIME」:在十進制格式SS格式和 「DATAR」:毫米。我想繪製一個簡單的折線圖。但是,由於在我的JSON數據中冒號(即:),對JSON.parse()的調用將不起作用。我只想將PHP中的JSON數組傳遞給JavaScript變量。無法使用JSON陣列

<?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

使用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', 
    }; 

請參閱this 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>

+0

完全爲我工作。謝謝! :) –