Question

我正在尝试使用php和Json图表以及ajax来实现我的图表即时消息，但标签未显示我已经搜索了槽形网络以使标签出现，但是没有太多信息，这是我的代码：

index.php

<html>
    <head>
        <title>Reporte mensual  </title>
        <meta charset="UTF-8">
    <h1 align="center"> </h1>
    <h3 align="center"> </h3>

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/chartJS/Chart.min.js"></script>
    </head>
    <style>
        .caja{
            margin: auto;
            max-width: 250px;
            padding: 20px;
            border: 1px solid #BDBDBD;
        }
        .caja select{
            width: 100%;
            font-size: 16px;
            padding: 5px;
        }
        .resultados{
            margin: auto;
            margin-top: 80px;
            width: 500px;
        }
    </style>



    <body> 
        <div class="caja">
            <select onChange="mostrarResultados(this.value);">
                <?php
                           for($i=01;$i<13;$i++){
                        if($i == 06){
                            echo '<option value="'.$i.'" selected>'.$i.'</option>';
                        }else{
                           echo '<option value="'.$i.'">'.$i.'</option>';
                        }
                    }
                ?>
            </select>
        </div>
        <div class="resultados"><canvas id="grafico"></canvas></div>
    </body>
    <script>
            $(document).ready(mostrarResultados(06));  
                function mostrarResultados(month){
                    $('.resultados').html('<canvas id="grafico"></canvas>');
                    $.ajax({
                        type: 'POST',
                        url: 'php/procesar.php',
                        data: 'month='+month,
                        dataType: 'JSON',
                          success:function(response){
                            var Datos = {
                                    labels : ['','','','','','','','','','',''],
                                    datasets : [
                                        {
                                            fillColor : 'rgba(153,102,255,0.6)', 
                                            strokeColor : 'rgba(57,194,112,0.7)', 
                                            highlightFill : 'rgba(153,102,255,0.6)', 
                                            highlightStroke : 'rgba(66,196,157,0.7)',
                                            data : response
                                        }
                                    ]
                                }
                            var contexto = document.getElementById('grafico').getContext('2d');
                            window.Bar = new Chart(contexto).Bar(Datos, { responsive : true });
                            Barra.clear();

                        }
                    });
                    return false;
                }
    </script>
</html>

这是代码中我进行查询的部分，它可以很好地显示我想要的数据，但是由于某些原因，标签没有显示出来，我不知道我应该如何创建一个数组来使那些出现并让我图完全是动态的。

预先感谢

process.php

<?php

      include_once('conexion.php');
    class Procesar extends Model{

        public function __construct(){ 
            parent::__construct(); 
        }

        public function build_report($month){
            $total = array();
            $i=0;
                $usuario = $i+1;
                $sql = $this->db->query("SELECT usuario,SUM(hojas)AS sum FROM trabajo WHERE month(fecha)='$month' GROUP BY usuario  ORDER BY SUM DESC LIMIT 1,10"); 
                foreach ($sql as $key){ 

                            $total[$key['usuario']] = $key['sum']; 
                            $i++;



                        }        

            return $total;
        }

    }

    if($_POST['month']){
        $class = new Procesar;
        $run = $class->build_report($_POST['month']);
        exit(json_encode($run));
    }
?>

Charts js Library标签

0 个答案: