Question

           <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
  
          google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAxisTickColors);

function drawAxisTickColors() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Nivel de Demanda Diario');
      data.addColumn('number', 'Cantidad de Personas');
      

      data.addRows([
        [{v: [8, 0, 0], f: '8:00'}, parseInt($('body').find('#1ºhora').attr('name'));],
        [{v: [10, 0, 0], f:'10:00'},  parseInt($('body').find('#2ºhora').attr('name'));]],
        [{v: [12, 0, 0], f: '12:00'},  parseInt($('body').find('#3ºhora').attr('name'));]],
        [{v: [14, 0, 0], f: '14:00'},  parseInt($('body').find('#4ºhora').attr('name'));]],
        [{v: [19, 0, 0], f: '19:00 '},  parseInt($('body').find('#5ºhora').attr('name'));]],
      ]);

      var options = {
        title: 'Nivel de Demanda Diario',
        focusTarget: 'category',
        hAxis: {
          title: 'Horario',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          },
          textStyle: {
            fontSize: 14,
            color: '#053061',
            bold: true,
            italic: false
          },
          titleTextStyle: {
            fontSize: 18,
            color: '#053061',
            bold: true,
            italic: false
          }
        },
        vAxis: {
          title: 'Porcentaje de Demanda',
          textStyle: {
            fontSize: 18,
            color: '#67001f',
            bold: false,
            italic: false
          },
          titleTextStyle: {
            fontSize: 18,
            color: '#67001f',
            bold: true,
            italic: false
          }
        }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
</script>

<html>
<body>
<?php
$consulta = "SELECT COUNT(*) as total from tfg.reservas WHERE  fecha='2019-05-29'and  hora  < '10:00:00' AND hora > '08:00:00';";

                            if ($resultado = mysqli_query( $conexion, $consulta )) {

    $fila = mysqli_fetch_assoc($resultado);
                            }
?>
<div style="padding-left:10px;">
                            <a><span class="badge badge-dark">Número de Reservas de 8:00 a 10:00</span></a>
                            <text class="badge badge-dark" name="1ºhora" cols="5" rows="2" id="1ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
                                <a><span class="badge badge-dark">reservas</span></a>
                                </div>
                                
                               <?php

 $consulta = "SELECT COUNT(*) as total from tfg.reservas WHERE  fecha='2019-05-29'and  hora  < '12:00:00' AND hora > '10:00:00';";

                            if ($resultado = mysqli_query( $conexion, $consulta )) {

    $fila = mysqli_fetch_assoc($resultado);
                            }
            
                            ?>
                            <div class="col-12 col-lg-6">
                            <div style="padding-left:10px;">
                            <a><span class="badge badge-dark">Número de Reservas de 10:00 a 12:00</span></a>
                            <text class="badge badge-dark" name="2ºhora" cols="5" rows="2" id="2ºhora" readonly="readonly" value="<?php echo $fila['total']; ?>"><?php echo $fila['total']; ?> </text>
                                <a><span class="badge badge-dark">reservas</span></a>
                                </div>
          </div>
          <div id="chart_div"></div>
          </body>
          </html>

我想从数据库查询生成一个google图表，该数据保存在textarea中。在柱形图中，我希望它根据其是否超过百分比来更改颜色，即，文本的值/ 50，如果百分比大于50％，则条形将为红色，否则为蓝色。

另一个问题是，不使用css将出现在屏幕右侧的图形与文本区域平行，怎么办？

感谢您的帮助。

从数据库信息创建Google图表

0 个答案: