javascript - 在 jQuery 条形图中加载 php foreach 值

Question

我正在研究 jQuery 条形图。
使用日期范围搜索空闲和占用空间，进入和退出总数，以下快照将简要介绍搜索结果； Search result http://www.shehary.com/stackimages/search-result.jpg

而 php forearch 是；

<?php if(count($occupied) < 1) return; foreach ($occupied as $key=>$value): ?>
<tr>
    <td><?php echo $key; ?></td>
    <td><?php echo $total_space; ?></td>
    <td><?php echo $real_data[$key] + $dep_data[$key];?></td>                
    <td><?php echo $total_space - $real_data[$key] - $dep_data[$key]; ?></td>
    <td><?php echo (array_key_exists($key, $real_data))?$real_data[$key]:0;?></td>
    <td><?php echo (array_key_exists($key, $dep_data))?$dep_data[$key]:0;?></td>
</tr>
<?php endforeach; ?> 

条形字符看起来像这样 Search result http://www.shehary.com/stackimages/barchart.jpg

以下是jQuery代码；

    $(function(){
        $('#graph').graphify({
            //options: true,
            start: 'bar',
            obj: {
                id: 'ggg',
                width: '100%',
                height: 375,
                xGrid: true,
                legend: true,
                title: 'Departure vs Return',
                points: [
                    [7, 26, 33, 74, 12, 49, 33, 33, 74, 12, 49, 33, 178, 160, 33, 74, 12, 49, 33, 178, 160, 178, 160, 33, 74, 12, 49, 33, 178, 160,450],
                    [32, 46, 75, 38, 62, 20, 52, 75, 38, 62, 20, 52, 134, 145, 52, 75, 38, 62, 20, 52, 134, 145, 145, 52, 75, 38, 62, 20, 52, 134, 145,300]
                ],
                pointRadius: 3,
                colors: ['#428bca', '#1caf9a'],
                xDist: 40,
                dataNames: ['Departure', 'Return'],
                xName: 'Day',
                tooltipWidth: 15,
                animations: true,
                pointAnimation: true,
                averagePointRadius: 5,
                design: {
                    tooltipColor: '#fff',
                    gridColor: '#f3f1f1',
                    tooltipBoxColor: '#d9534f',
                    averageLineColor: '#d9534f',
                    pointColor: '#d9534f',
                    lineStrokeColor: 'grey',
                }
            }
        });
    });

Private.defaults = function() {
    return {
        //Days or Date Range
        x: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
        y: 20,
        attachTo: 'body'
    };
};

和 HTML 来显示条形图；

<div id="graph"></div>

我需要帮助如何根据日期范围将值放入数组并加载到条形图中。

<删除> 要点:[ [''], [''] ], X: ['']

已编辑和更新的问题

@Marcos Dimitrio 的回答指出我之前使用了错误的数组作为引用；我很抱歉，以下是正确的 depart n 返回数组；

points: [
    ['<?php echo $real_data[$key];?>'],
    ['<?php echo $dep_data[$key]; ?>']
],

x: ['<?php echo $key; ?>']//No of Days in X-Axis If no x-axis arrays define, chart will not be loaded.

并且在根据您的说明使用代码作为答案后，我得到了这个，我手动定义了天数(x 轴)，例如 [1,2,3,4,5,6,7,8,9,10 ]

No-Bars http://www.shehary.com/stackimages/no-bars.jpg No Data in Table http://www.shehary.com/stackimages/bar-chart-table.jpg

以下是其余的 php 代码；

$from = mysql_real_escape_string($_POST['from']);     
$to = mysql_real_escape_string($_POST['to']);         
include_once 'parkingdetail.php'; //This file is doing all the calculation
//Add one day to today               
$real_data = array();
$total_space = 0;
$dep_data = array();
$occupied = array();
getParkData($to,$total_space,$real_data,$dep_data,$occupied,$av,$tp,$tpbooking,$from);
ksort($occupied);
//$total_space is fixed 2000
//$real_data is Depart
//$dep_data is Return
//$occupied is total sim of $real_data+$dep_data

Graph Working Example
问候。

Answer 1

首先，您可以将数据过滤到新数组中:

<?php
$start = "01-June-2015";
$end = "03-June-2015";

$points_departure = array();
$points_return = array();

foreach (array_keys($occupied) as $key) {
    if (isWithinRange($key, $start, $end)) {
        $points_departure[] = $real_data[$key] + $dep_data[$key];
        $points_return[] = $total_space - $real_data[$key] - $dep_data[$key];
    }
}

function isWithinRange($key, $start, $end) {
    $keyDate = DateTime::createFromFormat ("d-M-Y", $key);
    $startDate = DateTime::createFromFormat ("d-M-Y", $start);
    $endDate = DateTime::createFromFormat ("d-M-Y", $end);

    return $keyDate >= $startDate and $keyDate <= $endDate;
}

之后，您需要将它们发送到 JavaScript。您可以通过 AJAX 来完成，或者您可以使用更简单的方法并将其放在页面顶部:

<script>
var points_departure = <?php echo json_encode($points_departure); ?>;
var points_return = <?php echo json_encode($points_return); ?>;
</script>

这会给你:

<script>
var points_departure = [7,26,33];
var points_return = [32, 46, 75];
</script>

然后简单地用您创建的变量替换点数据:

points: [
    points_departure,
    points_return
],