0

Buen día Inges, tengo un tema de acomodo de una grafica de barras utilizando Chart.js con unos alerts de bootstrap 4. Me explico, en la siguiente imagen muestro como mis elementos se encuentran algo desalineados:

introducir la descripción de la imagen aquí

lo que yo intento hacer, es acomodar los alerts que se encuentran en la parte de abajo, a la derecha de mi gráfica de barras.

pero por algún motivo no encuentro la forma de posicionarlos correctamente, les muestro mi codigo html:

<link rel="stylesheet" href="~/css/BoxInfo.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <strong>Panel de Control</strong>  <small>Version 1.0</small>
            </div>
            <div class="card-body">
                <div class="col-md-8">
                    <canvas id="ChartCitas"></canvas>
                </div>
                <div class="col">
                    <div class="alert-wrap">
                        <div class="alert alert-success">
                            <i class="fas fa-medkit fa-2x"></i> <strong>CITAS TOTALES:</strong> 964.00
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-users fa-2x"></i> <strong>PACIENTES TOTALES:</strong> 3.00
                        </div>

                        <div class="alert alert-warning">
                            <i class="fas fa-user-md fa-2x"></i> <strong>MÉDICOS TOTALES:</strong> 25.00
                        </div>

                        <div class="alert alert-danger">
                            <i class="fas fa-hospital-alt fa-2x"></i> <strong>CONSULTORIOS TOTALES:</strong> 47.00
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    var ctx = document.getElementById("ChartCitas").getContext("2d");
    var MyChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            datasets: [{
                label: 'Numero de citas',
                data: [20, 36, 51, 10, 9, 78, 64, 18, 78, 85, 11, 3],
                backgroundColor: [
                    'rgb(0, 153, 255, 0.5)',
                    'rgb(163, 0, 204, 0.5)',
                    'rgb(0, 51, 17, 0.5)',
                    'rgb(255, 102, 0, 0.5)',
                    'rgb(179, 179, 0, 0.5)',
                    'rgb(255, 0, 0, 0.5)',
                    'rgb(0, 255, 255, 0.5)',
                    'rgb(204, 51, 0, 0.5)',
                    'rgb(68, 204, 0, 0.5)',
                    'rgb(0, 0, 204, 0.5)',
                    'rgb(102, 0, 102, 0.5)',
                    'rgb(102, 153, 255, 0.5)'
                ]
            }]
        }
    });
</script>

en mi codigo HTML, trato de acoplar la gráfica como los alerts dentro de un div class="row" y en una card ambos elementos. También probé con un FORM-INLINE pero aun sin tener éxito

y este es mi codigo css para añadir estilo a mis alerts:

.alert {
    padding: 20px;
    transition: all .3s ease;
}

    .alert:hover, .alert:focus {
        transform: scale(1.04);
        -webkit-box-shadow: 0 8px 20px #e8e8e8;
        box-shadow: 0 8px 20px #e8e8e8;
    }

.alert-wrap {
    width: 80%;
    margin: 30px auto 0;
    /*margin-right: 400px;*/
    /*margin-left:1150px;*/
}

.alert .close {
    opacity: 0;
    transition: opacity .3s ease;
}

.alert:hover .close, .alert:focus .close {
    opacity: .2;
}

.alert i {
    min-width: 30px;
    text-align: center;
}

.alert-success {
    background: rgb(214,233,198);
    background: linear-gradient(0deg, rgba(214,233,198,1) 0%, rgba(198,233,229,1) 100%);
    width: 30%;
    height: 100px;
}

.alert-info {
    background: rgb(188,232,241);
    background: linear-gradient(0deg, rgba(188,232,241,1) 0%, rgba(188,208,241,1) 100%);
    width: 30%;
    height: 100px;
}

.alert-warning {
    background: rgb(250,235,204);
    background: linear-gradient(0deg, rgba(250,235,204,1) 0%, rgba(250,227,204,1) 100%);
    width: 30%;
    height: 100px;
}

.alert-danger {
    background: rgb(235,204,209);
    background: linear-gradient(0deg, rgba(235,204,209,1) 0%, rgba(235,204,221,0.927608543417367) 100%);
    width: 30%;
    height: 100px;
}

Entonces es básicamente lo que trato de hacer, pero sin tener el acomodo al que quiero llegar

Si necesitan mas información y/o cualquier duda estaré al tanto

2
  • Para alerts te recomiendo Noty.js: ned.im/noty/#
    – alanfcm
    Commented el 25 ago. 2020 a las 19:37
  • 1
    @alanfcm perfecto, veré la documentación, gracias por la info Commented el 25 ago. 2020 a las 20:18

1 respuesta 1

0

lo que tenes que hacer es habilitar y configurar flex en el tag de card-body. La idea es habilitar el wrap para que permite darle continuidad a los tags que publicas. El nuevo codigo quedaría así

<link rel="stylesheet" href="~/css/BoxInfo.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <strong>Panel de Control</strong>  <small>Version 1.0</small>
            </div>
            <div class="card-body d-flex flex-row">

                <div class="col-md-8">
                    <canvas id="ChartCitas"></canvas>
                </div>

                <div class="col-md-4">
                    <div class="alert-wrap">
                        <div class="alert alert-success">
                            <i class="fas fa-medkit fa-2x"></i> <strong>CITAS TOTALES:</strong> 964.00
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-users fa-2x"></i> <strong>PACIENTES TOTALES:</strong> 3.00
                        </div>

                        <div class="alert alert-warning">
                            <i class="fas fa-user-md fa-2x"></i> <strong>MÉDICOS TOTALES:</strong> 25.00
                        </div>

                        <div class="alert alert-danger">
                            <i class="fas fa-hospital-alt fa-2x"></i> <strong>CONSULTORIOS TOTALES:</strong> 47.00
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Solo hice el cambio agregando "d-flex flex-row" en el div card-body Para mas info podes consultar en https://getbootstrap.com/docs/4.4/utilities/flex/

nota adicional: muy bueno el uso de colores en las alertas!

1
  • 1
    muchas gracias por tu respuesta, ya lo había corregido anteriormente, pero gracias a tu respuesta conozco la utilidad "flex" por primera vez de bootstrap Commented el 8 mar. 2021 a las 20:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.