Question

我有一个JSON数组，其中包含 hh：mm：ss 格式的“ etime ”和十进制格式的“ datar ”。我想绘制一个简单的折线图。但是，由于我的JSON数据中有冒号（即:），因此对JSON.parse（）的调用将不起作用。我想要的是将PHP中的JSON数组传递给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"]

Answer 1

使用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>

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

1 个答案: