1
C3.js
을 사용하여 막대 차트를 만들려고합니다. 데이터는 mySQL database
에서 PHP를 통해 가져오고 JS as JSON
으로 반환됩니다. 내가 할 수없는 나는,C3, D3 중첩 JSON 데이터가있는 차트
{
"BRACELET": {
"category": "BRACELET",
"total_purchased": 26
},
"SALESMAT": {
"category": "SALESMAT",
"total_purchased": 4
},
"TOPPING": {
"category": "TOPPING",
"total_purchased": 48
}
}
그러나 : PHP 코드는 정렬 된 열을 검색하고 {category:name, total_purchased:value}
$category_data_sql = "SELECT `category`, `total_purchased` FROM `item` ORDER BY `category`";
$category_data_result = $mysqli->query($category_data_sql);
$data = array();
$key = 0;
foreach ($category_data_result as $item) {
$key = $item['category'];
if (!array_key_exists($key, $data)) {
$data[$key] = array(
'category' => $item['category'],
'total_purchased' => $item['total_purchased'],
);
} else {
$data[$key]['total_purchased'] = $data[$key]['total_purchased'] + $item['total_purchased'];
}
$key++;
}
print_r(json_encode($data));
결과 JSON 출력의 배열을 끝내고 함께 관련 컬럼을 모두 추가입니다 이 데이터를 차트에 표시합니다. 아래 코드는 정상적으로 작동하며 모든 것이 예상대로 표시됩니다.
var json_data = (<?php echo json_encode($data); ?>);
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'category',
json: [
{
"category": "BRACELET",
"total_purchased": 26
},
{
"category": "SALESMAT",
"total_purchased": 4
},
{
"category": "TOPPING",
"total_purchased": 48
},
{
"category": "NECKLACE",
"total_purchased": 29
}
],
type: 'bar',
keys: {
x: 'category',
value: [ "total_purchased" ]
}
},
axis: {
x: {
type: "category"
}
},
bar: {
space: 0.25
}
});
하지만 변수 json_data
를 사용하거나 내가 수동으로 결과 JSON 데이터에 복사하면 내가 콘솔에서 오류없이 빈 테이블을 일단. 도움을 주시면 대단히 감사하겠습니다. 미리 감사드립니다, 콜린.