格式化Highcharts的jSON響應

Question

我正在使用高圖表； 特別是這個例子在這里

我正在嘗試根據jSON響應設置我的系列和x軸數據。

我要提取的數據是該月份的當前年份。 但是，有些月份沒有數據。 因此，如果我對X軸進行了硬編碼，然后jSON中缺少一個月的數據，則所有列都將關閉。

這是我的jSON數據的示例：

[
    {
        "month": "6",
        "year": "2014",
        "grandTotal": "1774",
        "booksTotal": "1288",
        "tuitionTotal": "486"
    },
    {
        "month": "7",
        "year": "2014",
        "grandTotal": "1488",
        "booksTotal": "842",
        "tuitionTotal": "986"
    },
    {
        "month": "8",
        "year": "2014",
        "grandTotal": "253",
        "booksTotal": "143",
        "tuitionTotal": "110"
    }
]

如您所見，從第6個月（5月）開始只有3個月的數據-圖表是從5月到8月。

因此，我需要弄清楚如何也使x軸也使用JSON，然后以一種基於序列數據知道要顯示幾個月的方式對其進行格式化。

這是我的代碼生成上面看到的jSON響應。

$objDB = new DB;
$xml   = $objDB->setStoredProc('tuitionFetchStats')
            ->setParam("action", $type)
            ->execStoredProc()
            ->parseXML();

//Loop over the XML response
foreach ($xml->dataSet as $data) {

//Define the output
$grandTotal     = (string) $data->grandTotal;
$booksTotal     = (string) $data->totalBooks;
$tuitionTotal   = (string) $data->tuitionTotal;
$month          = (string) $data->reimbursementMonth;
$year           = (string) $data->reimbursementYear;

switch($type){
    case 'y2d':
        //Add the results to an array
        $stats[] = array(
            'month' => $month,
            'year' => $year,
            'grandTotal' => $grandTotal,
            'booksTotal' => $booksTotal,
            'tuitionTotal' => $tuitionTotal
        );
    break;
    default:
        //
    break;  
}

}

//Set the content type to JSON  for jquery to understand
header('Content-Type: text/javascript');

//Print the response to the page
print json_encode($stats);

我需要以某種方式格式化我的jSON，以便可以使用它來創建X軸值以及系列數據。 例如，我可以遍歷jSON中的“父級”以創建類別，然后可以遍歷那些父級中的所有值以創建該系列的數據。

這是所提供數據的預期結果：

 $('#yearToDate').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Projected Tuition'
        },
        subtitle: {
            text: 'Current Year'
        },
        xAxis: {
            categories: [
                'Jun',
                'Jul',
                'Aug'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Dollar Amount'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>${point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Courses',
            data: [{'486','986', '110'}]

        }, {
            name: 'Books',
            data: [{'1228', '842', '143'}]

        }, {
            name: 'Total Cost',
            data: [{'1774', '986', '110'}]

        }]
    });

我只需要通過動態方式獲取所有這些數據，就好像我有9月的信息一樣，我還需要在X軸上顯示9月。

Answer 1

$series = array();

foreach ($xml->dataSet as $data) {   
  //Define the output
  $grandTotal     = (string) $data->grandTotal;
  $booksTotal     = (string) $data->totalBooks;
  $tuitionTotal   = (string) $data->tuitionTotal;
  $month          = (string) $data->reimbursementMonth;
  $year           = (string) $data->reimbursementYear;

  $courses['name'] = 'courses';
  $courses['data'][] = $grandTotal;

  $books['name'] = 'books';
  $books['data'][] = $booksTotal;

  $total_cost['name'] = 'Total cost';
  $total_cost['data'][] = $tuitionTotal;
  $monthAxis[] = $month;
}

print json_encode(array('series'=>$series, 'categories' =>$monthAxis));

Answer 2

只需將空值放在要跳過的位置...

{
    "month": "5",
    "year": "2014",
    "grandTotal": null,
    "booksTotal": null,
    "tuitionTotal": null
},