javascript 将 JSON 转换为正确的格式以放入 Morris Bar Chart 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24304545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transform JSON into correct format to put in Morris Bar Chart plugin
提问by Linesofcode
I'm using the Morris Bar Chart plugin. You can see an example here.
我正在使用莫里斯条形图插件。您可以在此处查看示例。
The correct data format to insert into the chart is the following:
插入图表的正确数据格式如下：
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
I want to fill that info but with ajax request to PHP.
我想填写该信息，但向 PHP 发送 ajax 请求。
$.ajax({
url: 'getchart.php',
success: function(content){
console.log(content); // Native return
var element = [];
var json = JSON.parse(content);
for(var i = 0; i <= json.length - 1; i++){
element[i] = {y: json[i][0].month, a: json[i][0].total};
}
console.log(element);
}
});
I've accomplish the request successfully but I do need to convert the json I get from ajax to the format that morris chart needs.
我已成功完成请求，但我确实需要将从 ajax 获得的 json 转换为莫里斯图表所需的格式。
[[{"total":1,"Month":7,"description":"Started"},
{"total":1,"Month":6,"description":"Started"}],
[{"total":3,"Month":6,"description":"Started"}]]
The code above is what the variable contentoutput. The problem here is that one index contains 2 sub-indexes and the other index contains only one sub-index:
上面的代码是什么变量content输出。这里的问题是一个索引包含 2 个子索引，而另一个索引只包含一个子索引：
Index 1:
索引 1：
[{"total":1,"Month":7,"description":"Started"},
{"total":1,"Month":6,"description":"Started"}],
And the second index only contains one sub-index
而第二个索引只包含一个子索引
Index 2:
索引2：
[{"total":3,"Month":6,"description":"Started"}]],
This happens because I'm pushing two different arrays into one in PHP.
发生这种情况是因为我在 PHP 中将两个不同的数组合并为一个。
$AN = $chart->chartAN(); // Apresentation and Negociation
$AC = $chart->chartAC(); // Accomplished
$final = array($AN, $AC);
echo json_encode($final);
And, btw, the output from both of functions is the same:
而且，顺便说一句，这两个函数的输出是相同的：
while($query->fetch()){
$rows[] = array("total" => $total, "month" => $month, "description" => $type);
}
Currently, the console.log(element)returns me:
目前，console.log(element)返回给我：
[Object, Object];
> 0: Object
a: 1
y: 7
> 1: Object
a: 3
y: 6
My final result I would like it to be something like:
我的最终结果我希望它是这样的：
element: [
{ y: 'April', a: value_from_chartAN, b: value_from_chartAC },
{ y: 'May', a: value_from_chartAN, b: value_from_chartAC },
],
EDIT: To clarify the question (because I know isn't that simple).
编辑：澄清问题（因为我知道不是那么简单）。
I would like my output to be:
我希望我的输出是：
element: [
{ y: month_from_database, a: value_from_chartAN, b: value_from_chartAC },
{ y: month_from_database, a: value_from_chartAN, b: value_from_chartAC },
],
Since value_from_chartANor value_from_chartACmight be null, it must add the number 0.
If you look at the example of Morris: http://jsbin.com/uzosiq/258/embed?javascript,live
由于value_from_chartAN或value_from_chartAC可能为空，它必须添加数字 0。如果您查看 Morris 的示例：http: //jsbin.com/uzosiq/258/embed?javascript,live
The year correspond to my Month, the blue bar to the value_from_chartANand the gray bar to value_from_chartAC.
年份对应我的月份，蓝色条对应于 ，value_from_chartAN灰色条对应于value_from_chartAC。
采纳答案by user1978142
The main problem is that your PHP return values (your JSON that you will send) is not on the same structure as needed by the Bar chart. You need to flatten it first. From there you code should work fine. Sample Fiddle
主要问题是您的 PHP 返回值（您将发送的 JSON）与条形图所需的结构不同。你需要先把它弄平。从那里你的代码应该可以正常工作。样品小提琴
Consider this example:
考虑这个例子：
<?php
if(isset($_POST['get_values'])) {
// replication of your data
$final = '[[{"total":1,"Month":7,"description":"Started"},{"total":1,"Month":6,"description":"Started"}],[{"total":3,"Month":6,"description":"Started"}]]';
$final = json_decode($final, true);
$new_final = array();
// simple flattening
foreach($final as $value) {
foreach($value as $sub_value) {
$new_final[] = $sub_value;
}
}
echo json_encode($new_final);
exit;
}
?>
<div id="bar-example"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: document.URL, // getchart.php
dataType: 'JSON',
type: 'POST',
data: {get_values: true},
success: function(response) {
Morris.Bar({
element: 'bar-example',
data: response,
xkey: 'description',
ykeys: ['Month', 'total'],
labels: ['Month', 'Total']
});
}
});
});
</script>
回答by Steve
You control the data sent from the server, so make sure its in the correct format before sending it - simply merge the php arrays into one, and set the correct header:
您控制从服务器发送的数据，因此在发送之前确保其格式正确 - 只需将 php 数组合并为一个，并设置正确的标头：
$final = array_merge($AN, $AC);
header('Content-Type: application/json');
echo json_encode($final);
Now you have the exact format you require returned to your ajax function, no further js processing required:
现在您拥有返回到 ajax 函数所需的确切格式，不需要进一步的 js 处理：
$.ajax({
url: 'getchart.php',
success: function(content){
console.log(content); // Native return is as required
}
});
EDIT as per your clarification. The solution is still to send the correct data from php, but the code is a little more complicated:
根据您的说明进行编辑。解决的办法还是从php发送正确的数据，只是代码稍微复杂一点：
//simulated calls to your functions, based on your posted data
$an = json_decode('[{"total":1,"Month":7,"description":"Started"}, {"total":1,"Month":6,"description":"Started"}]', true);
$ac = json_decode('[{"total":3,"Month":6,"description":"Started"}]', true);
//1st create an array from the $ac data that uses the month value as the key,
//so we can check if any month is contained in the array simply:
$ac_new=array();
foreach($ac as $item){
$month = $item['Month'];
$ac_new[$month] = $item['total'];
}
//array to hold are final data
$data = array();
foreach($an as $item){
$y = $item['Month'];
$a = $item['total'];
//if there is a value for this month in ac_new array, set $b to its value
//and then remove the element from the ac_new array, else set $b = 0
if(isset($ac_new[$y])){
$b = $ac_new[$y];
unset($ac_new[$y]);
}else{
$b = 0;
}
$data[] = array('y' => $y, 'a' => $a, 'b' => $b);
}
//if there any elements left in $ac_new then they are for months
//not included in $an array, so value for a must be 0
if(count($ac_new)>0){
foreach($ac_new as $key => $value){
$data[] = array('y' => $key, 'a' => 0, 'b' => $value);
}
}
//return correctly formatted data
header('Content-Type: application/json');
echo json_encode($data);
回答by waheed shah
<?php
session_start();
include("../phpfiles/include/Config.php"); //db connect
$dbc = @mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_DATABASE);
if(!$dbc)
{
trigger_error('Could not connect to MySql:'. mysqli_connect_error());
}
$query = "SELECT dateandtime,sum(grandtotal) FROM bb_pos.bb_bill
group by MONTH(dateandtime), YEAR(dateandtime) order by dateandtime DESC limit 12 "; // last 12 month in descending order
$result = mysqli_query($dbc, $query);
$cart = array();
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$date = $row['dateandtime'];
$time=strtotime($date);
$month=date("F",$time);
$year=date("Y",$time);
array_push($cart,array(
'period'=>$month." ".$year,
'SALE'=>$row['sum(grandtotal)']));
}
echo json_encode($cart);
mysqli_close($dbc);
?>
<body>
<div class="x_content1">
<div id="graph_bar_group" style="width:100%; height:280px;"></div>
</div>
</body>
<script>
$.getJSON('morrisdata.php', function(data)
{
var date = data;
function custom_sort(a, b) {
return new Date(a.period).getTime() - new Date(b.period).getTime();
}
date.sort(custom_sort); // convert the last 12 months in ascending order
//var product_name = data.name;
Morris.Bar({
element: 'graph_bar_group',
data: data,
xkey: ['period'],
ykeys: ['SALE'],
labels: ['SALE'],
hideHover: 'auto',
resize: true,
parseTime: false,
xLabelAngle: 60
});
});
</script>
