如何解析并将数据传递给我的Morris.js图表​​

Question

我想在我的应用程序中使用morris图表来显示一些数据。首先，让我告诉你我的js：

var handleStoreIncomeShareDonutChart = function() {
    var green = '#00acac';
    var blue = '#348fe2';

    Morris.Donut({
        element: 'storeincomeshare-donut-chart',
        data: [
            {label: "Store 1", value: 69},
            {label: "Store 2", value: 31}
        ],
        colors: [green, blue],
        labelFamily: 'Open Sans',
        labelColor: 'rgba(255,255,255,0.4)',
        labelTextSize: '12px',
        backgroundColor: '#242a30'
    });
};

这是我的charts.js文件中的一个片段。这段代码有效。但现在我想从我的数据库中添加数据。

我已经看到了不同的方法，但似乎没有什么对我有用。 dd＆＃39; ed数据如下所示：

array:2 [▼
  1 => array:2 [▼
    "name" => "Store 1"
    "value" => 25
  ]
  2 => array:2 [▼
    "name" => "Store 2"
    "value" => 75
  ]

我如何解析这些数据？我怎样才能将它附加到我的图表中，因为我无法在js文件中执行刀片语法样式/ php。

谢谢， LUMA

修改

我有更新！你的回答对我很有帮助，但我仍然是一个小问题。我知道这个问题，但不能告诉它为什么会发生。

我们来看看这个样本数据：

$data = [
    [
        "label" => "Store 1",
        "value" => "75"
    ],
    [
        "label" => "Store 2",
        "value" => "25"
    ],
];

DD＆＃39; ed机智将如下所示：

array:2 [▼
  0 => array:2 [▼
    "label" => "Store 1"
    "value" => "75"
  ]
  1 => array:2 [▼
    "label" => "Store 2"
    "value" => "25"
  ]
]

执行json_encode($data)和dd结果将如下所示： "[{"label":"Store 1","value":"75"},{"label":"Store 2","value":"25"}]" 或格式化：

[
    {
    "label": "Store 1",
    "value": "75"
},
{
    "label": "Store 2",
    "value": "25"
}

这是有效的JSON并与morris.js图表​​一起使用。但是当我对db中的数据做同样的事情时，有一些有趣的东西。

DD＆＃39; ed看起来像这样：

array:2 [▼
  1 => array:2 [▼
    "label" => "Store 1"
    "value" => 75
  ]
  2 => array:2 [▼
    "label" => "Store 2"
    "value" => 25
  ]
]

并且json_encode()不会像上面那样对其进行编码：

{
    "1": {
        "label": "Studio Friedberg",
        "value": 0
    },
    "2": {
        "label": "Studio Klein-Auheim",
        "value": 0
    }
}

这也是有效的JSON，但morris.js图表​​不接受。 我花了一些时间才弄明白，为什么会这样。你不能很好地发现差异，所以让我们来看看这两张图片：

那我的问题是什么？我有一个foreach循环，我将数组键设置为商店的id。

Answer 1

您可以使用array_map将其转换为正确的格式，并在加载<script>文件之前将其作为handleStoreIncomeShareDonutChart中的变量输出。以下代码应该适用于PHP 5.3及更高版本。

$data = array(
  array(
    'name' => 'Store 1',
    'value' => 25,
  ),
  array(
    'name' => 'Store 2',
    'value' => 75,
  ),
);

$output = array_map(function ($record) {
  return array(
    'label' => $record['name'],
    'value' => $record['value'],
  );
}, $data);
echo '<script>var morris_data = ' . json_encode($output) . ';';