javascript - 使用 php 将 mysql 数据转换为 javascript 图表

Question

cust    period  score
 x      012017  98.04
 x      122016  99.11
 x      112016  95.84
 y      012017  85.00
 y      022017  100.00
 y      012017  90.00

您好，我想将 php 中的下表结果作为 javascript 代码进行回显， 我该怎么做 ？使用我的代码，我无法在行之间设置逗号 结果是； data: [ [012017,90.00],[] ->> 最后一个方括号拆除代码。

 <script>

$(function () {

    /**
     * For each cust in table
     */
     var flotChartData = [
        {
            label: "bar",
            data: [ [period  , score]]
        }
    ];
    /**
     * Bar Chart Options for Analytics
     */
    var flotBarOptions = {
        series: {
            bars: {
                show: true,
                barWidth: 0.8,
                fill: true,
                fillColor: {
                    colors: [ { opacity: 1 }, { opacity: 1 } ]
                },
                lineWidth: 1
            }
        },
        xaxis: {
            tickDecimals: 0
        },
        colors: ["#62cb31"],
        grid: {
            show: true
        },
        legend: {
            show: false
        }
    };

    $.plot($("#flot-bar-chartCUST"), flotChartData, flotBarOptions);
  });

 </script>

这是我的代码，不起作用。

    <?php

 $result = mysqli_query($con,"SELECT * FROM main order by cust asc , period           asc");
 $pdocno=0;
 $x=1;




 while($row = mysqli_fetch_array($result)) {

    $docno= $row["cust"] ;


    if($x==1 or $docno!==$pdocno){
        if( $x!==1 and $docno!==$pdocno){


        echo "]
        }
    ];
    /**
     * Bar Chart Options for Analytics
     */
    var flotBarOptions = {
        series: {
            bars: {
                show: true,
                barWidth: 0.8,
                fill: true,
                fillColor: {
                    colors: [ { opacity: 1 }, { opacity: 1 } ]
                },
                lineWidth: 1
            }
        },
        xaxis: {
            tickDecimals: 0
        },
        colors: ['#62cb31'],
        grid: {
            show: true
        },
        legend: {
            show: false
        }
    };

    $.plot($('#flot-bar-chart$img'), flotChartData, flotBarOptions);";


    }
        echo " $docno";
        $img =  $row["cust"] ;

                    echo "var flotChartData = [
        {
            label: 'bar',
            data: [ [";



    }

     $step= $row["period"] ;
     $score= $row["score"] ;


    echo $step.",";



 echo $score;





 if( $docno!==$pdocno){
echo "],[";

 }



    $pdocno=$docno;
        ++$x;
}



echo "]
        }
    ];
    /**
     * Bar Chart Options for Analytics
     */
    var flotBarOptions = {
        series: {
            bars: {
                show: true,
                barWidth: 0.8,
                fill: true,
                fillColor: {
                    colors: [ { opacity: 1 }, { opacity: 1 } ]
                },
                lineWidth: 1
            }
        },
        xaxis: {
            tickDecimals: 0
        },
        colors: ['#62cb31'],
        grid: {
            show: true
        },
        legend: {
            show: false
        }
    };

    $.plot($('#flot-bar-chart$img'), flotChartData, flotBarOptions);";;


 ?>

Answer 1

你可能想尝试这个: `

    <?php

 $result = mysqli_query($con,"SELECT * FROM main order by cust asc , period           asc");
 $pdocno=0;
 $x=1;



$flowchartData = "[";
 while($row = mysqli_fetch_array($result)) {

    $docno= $row["cust"] ;

    if($x==1 or $docno!==$pdocno){
        if( $x!==1 and $docno!==$pdocno){
            $tempStore = "[".$row["period"].",".$row["score"]."],";
            if($tempStore){
                $flowchartData .= $tempStore;
            }
        }
    }
 }
 $flowchartData .= "]";

?>
<script>

$(function () {

    /**
     * For each cust in table
     */
     var flotChartData = [
        {
            label: "bar",
            data: <?php echo $flowchartData; ?>
        }
    ];
    /**
     * Bar Chart Options for Analytics
     */
    var flotBarOptions = {
        series: {
            bars: {
                show: true,
                barWidth: 0.8,
                fill: true,
                fillColor: {
                    colors: [ { opacity: 1 }, { opacity: 1 } ]
                },
                lineWidth: 1
            }
        },
        xaxis: {
            tickDecimals: 0
        },
        colors: ["#62cb31"],
        grid: {
            show: true
        },
        legend: {
            show: false
        }
    };

    $.plot($("#flot-bar-chartCUST"), flotChartData, flotBarOptions);
  });

 </script>

`