将 JSON 数据从 PHP 数组传递到 ChartJS答案

【问题标题】：Passing JSON data from PHP array into ChartJS将 JSON 数据从 PHP 数组传递到 ChartJS
【发布时间】：2015-03-04 14:28:37
【问题描述】：

所以我有一个从 WordPress 中的高级自定义字段中提取的数据创建的 PHP 数组：

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

这会在页面上输出以下内容：

[["2"],["4"],["1"],["3"],["5"]]

我想要做的是将结果放入 ChartJS 文件的数据变量中：

var radarChartData = {
labels: ["Price", "Speed", "Format", "Size", "User Experience"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(224,07,19,1)",
        pointColor: "rgba(224,07,19,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(224,07,19,1)",
        data: [5, 4, 5, 5, 1, 3] // data needs to replace this
    }
]
};

var ctx = document.getElementById('RadarChart').getContext('2d');
var myRadarChart = new Chart(ctx).Radar(radarChartData);

我有点 PHP / Javascript n00b 所以我希望有人能够为我阐明这一点。或者也许有更好的方法来做到这一点？提前谢谢你。

【问题讨论】：

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

标签： javascript php json wordpress chart.js

【解决方案1】：

将数组中的 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>

【讨论】：