在 jQuery 条形图中加载 php foreach 值答案

【问题标题】：Loading php foreach values in jQuery bar chart在 jQuery 条形图中加载 php foreach 值
【发布时间】：2015-08-25 01:10:50
【问题描述】：

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

而 php forsearch 是；

<?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; ?>

Bar Char 看起来像这样 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 的回答指出我之前使用了错误的数组作为有问题的参考；我的道歉，以下是正确的离开 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
问候。

【问题讨论】：

部分points: [ ['<?php echo ... ... ?>'] ],在循环内吗？
不，我把它放在问题中只是为了参考，我如何将数组放入点中，以便在条形图中加载值。
你的编辑后我有点迷路了。在您有一个明确的问题之前：“如何根据日期范围将值放入数组并加载到条形图中”。现在，我不清楚你需要什么。
需求是一样的，如果你看最后2个快照，它在我集成你的解决方案之后，条形图没有加载数组，其余代码仅供参考和图形工作示例问题底部的图表与我使用的图表相同。
您是否在使用isWithinRange 过滤后尝试print_r($dep_data);？你得到了什么？在我的例子中，我做了$points_departure[] = $real_data[$key] + $dep_data[$key];，也许你需要$points_departure[$key] = $real_data[$key] + $dep_data[$key];（注意$points_departure[$key]）。

标签： javascript php jquery foreach bar-chart

【解决方案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
],

【讨论】：

bingo，搞定了，非常感谢大家的帮助。

【解决方案2】：

你可以像这样创建一个全局 JavaScript 变量：

<script>
var dataPoints = [ <?php echo implode(', ',$pointsArray) ?>];
</script>

然后像这样在插件中引用它：

point: dataPoints

【讨论】：

【解决方案3】：

您为什么不在foreach 循环中创建您要使用的两个数组？

$one = array();
$two = array();
foreach ($occupied as $key=>$value):
    // the rest of the stuff you do...
    $one[] = $real_data[$key] + $dep_data[$key];
    $two[] = $total_space - $real_data[$key] - $dep_data[$key];
endforeach;

然后，在您定义图形数据的 JavaScript 中，implode() 将结果放入列表中。

points: [
    [<?php echo implode(", ", $one); ?>],
    [<?php echo implode(", ", $two); ?>]
],

【讨论】：