我想在我的应用程序中使用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' 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' 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' 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。
答案 0 :(得分: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) . ';';