Javascript 将JSON数据从PHP数组传递到ChartJS

因此，我使用从WordPress中的高级自定义字段中提取的数据创建了一个PHP数组：

<?php
  $chartArray = array();
  forEach($cat_meta as $key => $value) {
  $chartArray[] = array($value['star_rating']);
  }
  echo json_encode($chartArray);
?>

---

我有点像PHP/Javascript n00b，所以我希望有人能为我解释一下。或者也许有更好的方法？提前感谢。

将数组中的JS对象/数据作为字符串存储在PHP中并打印出来

<?php

// start script
$str = '<script>';
// start chart
$str .= 'var radarChartData = {';
// make labels
$str .= 'labels: [';
$delimiter = '';
foreach($chartArray as $key => $val){
    $str .= $delimiter.'"'.$key.'"';
    $delimiter = ', ';
}
// make dataset
$str .= '], datasets: [{';
$str .= 'label: "My First dataset", ';
$str .= 'fillColor: "rgba(220,220,220,0.2)", ';
$str .= 'strokeColor: "rgba(224,07,19,1)", ';
$str .= 'pointColor: "rgba(224,07,19,1)", ';
$str .= 'pointStrokeColor: "#fff", ';
$str .= 'pointHighlightFill: "#fff", ';
$str .= 'pointHighlightStroke: "rgba(224,07,19,1)",';
$str .= 'data: [';
$delimiter = '';
foreach($chartArray as $key => $val){
    $str .= $delimiter.$val;
    $delimiter = ', ';
}
$str .= ']}]};';
// end script
$str .= "</script>";
// print
print $str;

?>

<canvas id='RadarChart' class='chart' width='400px' height='400px'></canvas>

<script>
var ctx = document.getElementById('RadarChart').getContext('2d');
var polar_big5 = new Chart(ctx).Radar(radarChartData);
</script>

var ctx=document.getElementById（'RadarChart'）.getContext（'2d'）；
var polar_big5=新海图（ctx）。雷达（radarChartData）；

您的javascript和php之间有链接吗？（如Ajax请求…）当前没有。我尝试了几种不同的方法，但一直都是空白：-（看看这篇关于$.ajax（）的教程）它是javascript JQuery插件的一部分。使用它，您将从javascript页面调用Php页面，然后检索包含数据的数组。当您在javascript中获取数据时，您必须将数组数组转换为简单的int数组：）

<?php

// start script
$str = '<script>';
// start chart
$str .= 'var radarChartData = {';
// make labels
$str .= 'labels: [';
$delimiter = '';
foreach($chartArray as $key => $val){
    $str .= $delimiter.'"'.$key.'"';
    $delimiter = ', ';
}
// make dataset
$str .= '], datasets: [{';
$str .= 'label: "My First dataset", ';
$str .= 'fillColor: "rgba(220,220,220,0.2)", ';
$str .= 'strokeColor: "rgba(224,07,19,1)", ';
$str .= 'pointColor: "rgba(224,07,19,1)", ';
$str .= 'pointStrokeColor: "#fff", ';
$str .= 'pointHighlightFill: "#fff", ';
$str .= 'pointHighlightStroke: "rgba(224,07,19,1)",';
$str .= 'data: [';
$delimiter = '';
foreach($chartArray as $key => $val){
    $str .= $delimiter.$val;
    $delimiter = ', ';
}
$str .= ']}]};';
// end script
$str .= "</script>";
// print
print $str;

?>

<canvas id='RadarChart' class='chart' width='400px' height='400px'></canvas>

<script>
var ctx = document.getElementById('RadarChart').getContext('2d');
var polar_big5 = new Chart(ctx).Radar(radarChartData);
</script>