javascript - 格式化 Highcharts 的 JSON 响应

Question

我正在使用 High Charts；具体来说这个例子here

我正在尝试从 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));