Question

我在Chart.js - Getting data from database using mysql and php找到了这个很棒的资源，但我需要帮助从数据库中检索这些记录。这就是我按照上面的指南所做的。

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

标签：[“Jan”，“Feb”，“March”，“April”，“May”]

和

数据：[randomScalingFactor（），randomScalingFactor（），randomScalingFactor（）]

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

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

Answer 1

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

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

您应该准备/执行或至少转义查询中的数据。请查看this。

如何使用php变量循环javascript内部

1 个答案: