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

时间:2016-10-18 16:14:04

标签: javascript php json chart.js2

我的数据集需要与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(); 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" ] } 将其返回给JavaScript:

QFile file("C:/key.txt");
if (!file.exists())
{
    file.open(QIODevice::WriteOnly | QIODevice::Text);
    file.write("0");
    file.close();
}

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

1 个答案:

答案 0 :(得分:6)

让我们从顶部开始

  • theDataobject
  • datasetsarray
  • objects
  • labelsarray

所以让我们着手构建这个

$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"
  ]
}