如何使用php和sql在Chart.js中生成多条形图

问题描述 投票:0回答:1

我有一个名为total_summary的表,其中包含4个字段-[Date],[Month / Year],[Dredger]和[Barge Volume]。

我正在尝试生成一个多条形图,以显示按日期分组的每个挖泥船的总量。下面是我编写的用于生成图形的代码:

PHP:

 <?php
        $datelist = "";
        $dredgelist = "";
        $volumedata = "";
        $datearray = "'2019-10-01";
        $title = "'Dredging Volume'";
        $chartype = "'bar'";
        $barcolor = "'rgb(252, 155, 155, 0.5)'";
        $x_title = "'Date'";
        $yline = "true";
        $xline = "false";
        $bkcolor = "#F5F5F5";

                    $sql_query = "SELECT [date], [Dredger], SUM([Barge Volume]) AS 'Dredging Volume' FROM OVERALL_SUMMARY_ORIGINAL 
                                         WHERE [Month/Year] in ($datearray) GROUP BY [Date], [Dredger] order by [Date], [Dredger]";
                    $stmt = sqlsrv_query($conn, $sql_query);

                    while($row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC)){

                        $datelabel = $row[0]->format('Y/m/d');
                        $dredger = $row[1];
                        $vol = $row[2];

                        $datelist = $datelist."'".$datelabel."',";
                        $datelist_2 = trim($datelist,",");

                        $dredgelist = $dredgelist."'".$dredger."',";
                        $dredgelist_2 = trim($dredgelist,",");

                        $volumedata = $volumedata.$vol.",";
                        $volumedatalist = trim($volumedata,",");        
                    }

    ?>

    <canvas id="myChart2" style="background-color:<?php echo $bkcolor; ?>; height:400px;"></canvas>

Javascript

 <script type="text/javascript">

            /*****first chart********/
            var ctx = document.getElementById('myChart2').getContext('2d');
                var myChart = new Chart(ctx, {
                    type:<?php echo $chartype; ?>,
                    data : {
                      labels: [<?php echo $datelist_2; ?>], <!--label name->
                      datasets: [
                          { 
                            label: [<?php echo $dredgelist_2;?>],
                            data: [<?php echo $volumedatalist; ?>],
                            backgroundColor: <?php echo $barcolor; ?>
                          }               
                          ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        tooltips: {
                                   callbacks: {
                                       label: function(tooltipItem, data) {
                                           return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}}
                                }, 
                          scales: {
                            xAxes: [
                              { 
                                stacked: true ,
                                scaleLabel: {
                                    display: true,
                                    labelString: <?php echo $x_title; ?>,
                                    fontSize: 11,
                                    fontStyle: "bold"
                                },
                                ticks: {
                                    fontSize: 11
                                },
                                gridLines: {
                                    display: <?php echo $xline; ?>
                                }
                             }],
                            yAxes: [
                                { 
                                stacked: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Barge Volume (m3)',
                                    fontSize: 11,
                                    fontStyle: "bold"
                                },
                                ticks: {
                                    fontSize: 11,
                                    beginAtZero:true,
                                    userCallback: function(value, index, values) {
                                        value = value.toString();
                                        value = value.split(/(?=(?:...)*$)/);
                                        value = value.join(',');
                                        return value;
                                        }
                                    },
                                gridLines: {
                                    display: <?php echo $yline; ?>
                                }                           
                              }
                            ]
                          },
                          legend: {
                              display: true,
                              labels: {
                                  fontSize: 15,
                                  fontStyle: "bold",
                                  padding: 16
                              },
                              position: 'top'
                          },
                          title: {
                              display: true,
                              text: <?php echo $title; ?>,
                              fontSize: 15

                          },
                          plugins: {
                                  datalabels: {
                                     display: true,
                                     align: 'center',
                                     anchor: 'center'
                                  }
                               }
                        }

                    });



            </script>       

但是,我得到的图表输出看起来像这样,这不是我想要的enter image description here

我试图让Chart js生成一个多柱形柱形图,如下所示。我该如何实现?我已经尝试解决了几天,但无济于事。谁能指导我?谢谢

enter image description here

javascript php chart.js sqlsrv
1个回答
0
投票

我想唯一的方法是创建多个数据集而不是一个。这可能不是最佳答案,但这是我做到的方式。

<script type="text/javascript">

            /*****first chart********/
            var ctx = document.getElementById('myChart2').getContext('2d');
                var myChart = new Chart(ctx, {
                    type:<?php echo $chartype; ?>,
                    data : {
                      labels: [<?php echo $datelist_2; ?>], <!--label name->
                      datasets: [
                          { 
                            label: [<?php echo $dredgelist_2;?>],
                            data: [<?php echo $volumedatalist; ?>],
                            backgroundColor: <?php echo $barcolor; ?>
                          },
                          { 
                            label: [<?php echo yourVariable;?>],
                            data: [<?php echo yourVariable; ?>],
                            backgroundColor: <?php echo yourColor; ?>
                          },
                          { 
                            label: [<?php echo yourVariable;?>],
                            data: [<?php echo yourVariable; ?>],
                            backgroundColor: <?php echo yourColor; ?>
                          },
                          { 
                            label: [<?php echo yourVariable;?>],
                            data: [<?php echo yourVariable; ?>],
                            backgroundColor: <?php echo yourColor; ?>
                          }               
                          ]
                    },
                    options: {
                        responsive: true,
                          ..............
                          .............
                          .........
</script>

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.