将返回的PHP数据转换为JavaScript对象

我有一个数据集需要与JavaScript变量格式相同,如下所示：

var theData = {
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ],
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"]
};

数据是用PHP构建的,但我不能完全相同.

这是我在PHP中的内容(示例数据,但填充它的方法相同)：

$data = array();

$data['datasets'][1]['label']           = "First Data Set";
$data['datasets'][1]['borderColor']     = "rgba(30, 87, 153, .9)";
$data['datasets'][1]['backgroundColor'] = "rgba(30, 87, 153, .5)";

$data['datasets'][2]['label']           = "Afternoon";
$data['datasets'][2]['borderColor']     = "rgba(41, 137, 216, .9)";
$data['datasets'][2]['backgroundColor'] = "rgba(41, 137, 216, .5)";

// Loop through some foreachs and fill the $data
// Not the actual loop I use but same principle

foreach ($theData as $data)
{
    $data['datasets'][1]['data'][] = data;
}

foreach ($otherData as $data)
{
    $data['datasets'][2]['data'][] = data;
}

这将使用json_encode()返回给JavaScript;当我做console.log(JSON.stringify(theData))我得到这个：

{
    "datasets":{
        "1":{
            "label":"Morning",
            "borderColor":"rgba(125, 185, 232, .9)",
            "backgroundColor":"rgba(125, 185, 232, .5)",
            "borderWidth":1,
            "data":[
                "24",
                0,
                0,
                "30",
                "24",
                "36",
                "36"
            ]
        },
        "2":{
            "label":"Afternoon",
            "borderColor":"rgba(41, 137, 216, .9)",
            "backgroundColor":"rgba(41, 137, 216, .5)",
            "borderWidth":1,
            "data":[
                "24",
                0,
                0,
                "24",
                "24",
                "30",
                "36"
            ]
        }
    },
    "labels":[
        "Sun Aug 14",
        "Mon Aug 15",
        "Tue Aug 16",
        "Wed Aug 17",
        "Thu Aug 18",
        "Fri Aug 19",
        "Sat Aug 20"
    ]
}

这是Chart.js 2.3.顶部的样本数据直接来自Chart.js样本数据.上面的JSON是我的结果.因为它们不相同,所以图表不起作用.我可以更改我的PHP,使其更像是最顶层的样本吗？

解决方法:

让我们从顶部开始吧

> theData是一个对象
> datasets是一个对象数组
> labels是一个数组

所以让我们着手建立这个

$data = array();
$data['datasets'] = array();
$data['datasets'][] = array("label" => "First Data Set",
     "borderColor" => "rgba(30, 87, 153, .9)",
     "backgroundColor" => "rgba(30, 87, 153, .5)"
     );
$data['datasets'][] = array("label" => "Second Data Set",
     "borderColor" => "rgba(41, 137, 216, .9)",
     "backgroundColor" => "rgba(41, 137, 216, .9)"
     );

$data['labels'] = array("Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running");

echo json_encode($data);

如前所述,一旦构建数组,json_encode就会为您完成所有工作

{
  "datasets": [
    {
      "label": "First Data Set",
      "borderColor": "rgba(30, 87, 153, .9)",
      "backgroundColor": "rgba(30, 87, 153, .5)"
    },
    {
      "label": "Second Data Set",
      "borderColor": "rgba(41, 137, 216, .9)",
      "backgroundColor": "rgba(41, 137, 216, .9)"
    }
  ],
  "labels": [
    "Eating",
    "Drinking",
    "Sleeping",
    "Designing",
    "Coding",
    "Cycling",
    "Running"
  ]
}

标签：json,php,javascript,chart-js2
来源： https://codeday.me/bug/20190527/1165525.html