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轴值和系列数据。例如，我可以遍历＆＃34;父母＆＃34;在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
},

格式化Highcharts的jSON响应

2 个答案: