如何使用php变量在javascript内部循环 - How to loop inside javascript using php variable

我在Chart.js上找到了这个很棒的资源-使用mysql和php从数据库中获取数据，但我有点需要帮助才能从数据库中检索这些记录。这是我已经按照上面的指南做的。

将php保存在单独的文件api.php中，并使用JSON调用api.php。但我需要制作

标签：["一月"，"二月"，"三月"，"四月"，"五月"]

和

数据：[randomScalingFactor（），randomScaling Factor（

部分从sql数据库中动态检索数据。对于标签，我需要设置输入数据库日期的值，对于data，我需要分别设置输入数据库的值。如果有人能指导我，我将不胜感激。谢谢

api.php

<?php
$id    = $_REQUEST['ID'];
$item1 = $_REQUEST['item'];
$sql = "SELECT * FROM item WHERE item_sup_company = '$id' AND subcategory = '$item1' ORDER BY item_id DESC";
$ser      = new DBConnection();
$serchRes = $ser->executeQuery($sql);
$result   = mysql_fetch_object($serchRes);

$arrLabels   = $result->date;
$arrdata     = $result->item_price;
$arrDatasets = array(
    'label' => "My First dataset",
    'fillColor' => "rgba(220,220,220,0.2)",
    'strokeColor' => "rgba(220,220,220,1)",
    'pointColor' => "rgba(220,220,220,1)",
    'pointStrokeColor' => "#fff",
    'pointHighlightFill' => "#fff",
    'pointHighlightStroke' => "rgba(220,220,220,1)",
    'data' => $arrdata
);
$arrReturn = array(
    array(
        'labels' => $arrLabels,
        'datasets' => $arrDatasets
    )
);
print(json_encode($arrReturn));
?>

index.html

<script type="text/javascript">
    $.ajax({
        type: 'POST',
        url: '../include/chart-api.php',
        success: function(data) {
            lineChartData = data;
            var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: true
            });
        }
    });
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 1000)
    };
    window.onload = function() {
        var chart1 = document.getElementById("line-chart").getContext("2d");
        window.myLine = new Chart(chart1).Line(lineChartData, {
            responsive: true
        });
    };                                          
</script>
<div class="canvas-wrapper">
  <canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>
</div>

现在我已经走到了这一步，我需要一些身体来帮助我。已在图中检索记录集值。然而，该图只显示了所有值的一条记录。

以下是我的做法。

<?php

$sqlchart = "SELECT * FROM item WHERE item_sup_company = '$id' AND subcategory = '$item1' ORDER BY item_id DESC";

$chartres = new DBConnection();
$chartr   = $chartres->executeQuery($sqlchart);
?><?php
while ($chartrows = mysql_fetch_object($chartr)) {
    $monthdate = strtotime($chartrows->date);
    $todate    = date("M", $monthdate);
    $arrLabels1 = $todate;
    $arrdata1 = $chartrows->item_price;
    echo $arrLabels1 . ' ' . $arrdata1 . "<br/>";
    //$arrDatasets = array('label' => "My First dataset",'fillColor' => "rgba(220,220,220,0.2)", 'strokeColor' => "rgba(220,220,220,1)", 'pointColor' => "rgba(220,220,220,1)", 'pointStrokeColor' => "#fff", 'pointHighlightFill' => "#fff", 'pointHighlightStroke' => "rgba(220,220,220,1)", 'data' => $arrdata);
    //$arrReturn = array(array('labels' => $arrLabels, 'datasets' => $arrDatasets));
    //print (json_encode($arrReturn));
?>
<script type="text/javascript">
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 10)
    };
    var lineChartData = {
        labels : ["<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>"],
        datasets: [
            {
                label: "My Second dataset",
                fillColor: "rgba(48, 164, 255, 0.2)",
                strokeColor: "rgba(48, 164, 255, 1)",
                pointColor: "rgba(48, 164, 255, 1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(48, 164, 255, 1)",
                data : [<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>]
            }
        ]
    }
    window.onload = function() {
        var chart1 = document.getElementById("line-chart").getContext("2d");
        window.myLine = new Chart(chart1).Line(lineChartData, {
            responsive: true
        });
    };  
</script>
<?php  
}
?>

原因是您在数据和标签中重复相同的变量：

data : [<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>, ...
labels : ["<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>", ...

试着先将数据库中的所有数据放入PHP数组，然后将该数组输出到JSON中（JavaScript将能够正确理解它）。

例如：

$arrdata = array();
$arrLabels = array();
while ($chartrows = mysql_fetch_object($chartr)) {
    $monthdate = strtotime($chartrows->date);
    $todate = date("M", $monthdate);
    $arrLabels[] = $todate;
    $arrdata[] = $chartrows->item_price;
}

现在将您的输出移出while循环，您只生成一个图表。

因此，在您的JavaScript中（如前一句所述，这应该在while循环之外）。

var lineChartData = {
    label : <?php json_encode($arrLabels); ?>,
    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(48, 164, 255, 0.2)",
            strokeColor: "rgba(48, 164, 255, 1)",
            pointColor: "rgba(48, 164, 255, 1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(48, 164, 255, 1)",
            data : <?php json_encode($arrdata); ?>
        }
    ]
};

我还注意到你没有清理你的查询：

$id    = $_REQUEST['ID'];
$item1 = $_REQUEST['item'];
$sql = "SELECT * FROM item WHERE item_sup_company = '$id' AND subcategory = '$item1' ORDER BY item_id DESC";