0

Tengo la necesidad de crear un grafico de barras con la librería Chart.js

Tengo el siguiente código

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Informe con Gráfico de Barras</title>
    <!-- Incluir Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Informe con Gráfico de Barras</h1>

    <!-- Agregar un contenedor para el gráfico -->
    <canvas id="barChart" width="10" height="5"></canvas>

    <script>
        // Datos para el gráfico de barras
        var data = {
            labels: ["17/09", "18/09", "19/09", "20/09", "21/09", "22/09", "23/09"],
            datasets: [{
                label: "Ventas",
                data: [12.50, 19.00, 3.50, 5, 2, 10, 20],
                backgroundColor: 'rgb(4, 24, 124)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };

        // Opciones del gráfico de barras
        var options = {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    offset: 4,
                    color: 'red',
                    font: {
                        weight: 'bold',
                        size: 12
                    }
                }
            }
        };

        // Crear el gráfico de barras
        var ctx = document.getElementById('barChart').getContext('2d');
        var barChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    </script>
</body>
</html>

Lo que necesito es que el monto se quede fijo en la parte superior de cada barra y que no se muestre al poner el raton por encima de la barra, el otro problema que tengo es que no puedo modificar es el tamaño del contenedor de las barras voy a ingresar mas información por debajo de las barras por que es un reporte por mas que modifique el width y el height

grafico de barras

1 respuesta 1

0

Versión de Chart.js que estoy usando: Chart.js v2.8.0. añado lo siguiente:

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

y el código completo quedaria asi:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Informe con Gráfico de Barras</title>
    <!-- Incluir Chart.js -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script src="chart.js"></script>
</head>

<body>
    <h1>Informe con Gráfico de Barras</h1>

    <!-- Agregar un contenedor para el gráfico -->
    <div style="width: 50%; max-height: 250px;">
        <canvas id="barChart" width="10" height="5"></canvas>
    </div>

    <script>
        Chart.pluginService.register({
            beforeRender: function(chart) {
                if (chart.config.options.showAllTooltips) {
                    chart.pluginTooltips = [];
                    chart.config.data.datasets.forEach(function(dataset, i) {
                        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
                            chart.pluginTooltips.push(new Chart.Tooltip({
                                _chart: chart.chart,
                                _chartInstance: chart,
                                _data: chart.data,
                                _options: chart.options.tooltips,
                                _active: [sector]
                            }, chart));
                        });
                    });

                    chart.options.tooltips.enabled = false;
                }
            },
            afterDraw: function(chart, easing) {
                if (chart.config.options.showAllTooltips) {
                    if (!chart.allTooltipsOnce) {
                        if (easing !== 1)
                            return;
                        chart.allTooltipsOnce = true;
                    }

                    chart.options.tooltips.enabled = true;
                    Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
                        tooltip.initialize();
                        tooltip.update();
                        tooltip.pivot();
                        tooltip.transition(easing).draw();
                    });
                    chart.options.tooltips.enabled = false;
                }
            }
        });
        // Datos para el gráfico de barras
        var data = {
            labels: ["17/09", "18/09", "19/09", "20/09", "21/09", "22/09", "23/09"],
            datasets: [{
                label: "Ventas",
                data: [12.50, 19.00, 3.50, 5, 2, 10, 20],
                backgroundColor: 'rgb(4, 24, 124)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };

        // Opciones del gráfico de barras
        var options = {
            showAllTooltips: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    offset: 4,
                    color: 'red',
                    font: {
                        weight: 'bold',
                        size: 12
                    }
                }
            }
        };

        // Crear el gráfico de barras
        var ctx = document.getElementById('barChart').getContext('2d');
        var barChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    </script>
</body>

</html>

Lo que se esta haciendo aquí, es reemplazar los tooltips normales por otros que sean customizados. Aquí un ejemplo de como quedaría: introducir la descripción de la imagen aquí

Fíjate también que el elemento canva lo pude dentro de un div al que le di un ancho y un alto según lo que necesito.

4
  • El código que compartes lo tienes dentro de la etiqueta script que esta dentro de la etiqueta body? el 19 sep. a las 17:38
  • 1
    así es, editaré la respuesta para mostrar el código completo.
    – dihego08
    el 19 sep. a las 17:54
  • Te comento que no me funciona solo me sale el titulo del reporte, necesito que los js me refiero a la librería se obtengan de manera online, Failed to load resource: the server responded with a status of 404 (Not Found) el 19 sep. a las 18:09
  • 1
    192.99.55.83/sistema/plugins/Chart.js/Chart.js, Descargalo de ahí
    – dihego08
    el 19 sep. a las 20:02

Tu Respuesta

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

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