使用 php 和 mysql 的条形图 - Bar graph using php and mysql

Bar graph using php and mysql

本文关键字：条形图 mysql php 使用 | 更新日期: 2023-09-27

来自MySql数据的要求条形图，我有静态条形图的工作代码如下代码-->

<script>
var data = [    
    [0, 11], //London, UK
    [1, 15], //New York, USA
    [2, 25], //New Delhi, India
    [3, 24], //Taipei, Taiwan
    [4, 13], //Beijing, China
    [5, 18]  //Sydney, AU
];
var dataset = [
    { label: "barchart", data: data, color: "#5482FF" }
];
var ticks = [
    [0, "London"],
    [1, "New Mumbai"],
    [2, "New Delhi"],
    [3, "Taipei"],
    [4, "Beijing"],
    [5, "Sydney"]
];
<script>

但是对于动态条形图，数据来自数据库，数据也采用数组格式，如下所示

Array
(
    [0] => Array
        (
            [product] => abc
            [total] => 21
        )
    [1] => Array
        (
            [product] => xyz
            [total] => 1
        )
    [2] => Array
        (
            [product] => pqr
            [total] => 13
        )
)

如何从这些数据创建条形图？或任何建议？

使用的图表.js
图表 http://www.chartjs.org/docs/文档

条形图示例。我希望这对你有所帮助

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>
<?php 
$array=array
(
    '0' => array
        (
            'product' => 'abc',
            'total' => 21
        ),
    '1' => array
        (
            'product' => 'xyz',
            'total' => 1
        ),
    '2' => array
        (
            'product' => 'pqr',
            'total' => 13
        )
);
?>

<script>
        var lab=[];
        var data=[];
        <?php 
        foreach($array as $tem)
        {
            ?>
            lab.push('<?php echo $tem['product']; ?>');
            data.push('<?php echo $tem['total']; ?>');
        <?php }
        ?>
        var barChartData = {
            labels : lab,
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : data
                },
            ]
        }
    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
    </script>
    </body>
</html>

 $results = "data From the DB";
  $ticks = array();
  foreach($results as $result){
      $data[0] = $result['product'];
      $data[1] = $result['total'];
      $ticks[] = $data;
    }
    <script>
    var ticks =  <?php print_R($ticks); ?> 
    </script>