Javascript 无法使用JSON数组绘制折线图_Javascript_Php_Json_Plotly

Javascript 无法使用JSON数组绘制折线图

javascript php json

Javascript 无法使用JSON数组绘制折线图,javascript,php,json,plotly,Javascript,Php,Json,Plotly,我有一个JSON数组，其中包含hh:mm:ss格式的“etime”和十进制格式的“datar”。我想画一个简单的折线图。但是，由于我的JSON数据中有冒号（即：），因此对JSON.parse（）的调用将不起作用。我只想将JSON数组从PHP传递到JavaScript变量中 <?php $url ="../getShiftData"; $clientid ="12021993"; $shiftid = "2"; $machineid = "2222"; $edate = "2017-04-0

我有一个JSON数组，其中包含hh:mm:ss格式的“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>

$yarr看起来像：

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

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

使用PHP函数将数组作为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',
    };

非常适合我。谢谢！：）