1

solicito de su apoyo para que me orienten ya que tengo que crear la siguiente grafica introducir la descripción de la imagen aquí pero al ejecutar mi código se muestra de la siguiente forma, no los muestra de manera separa , lo unico que hace es colocarlos de manera encimada y cosa que esta mal ya que los quiero colocar cada dato separado les comparto mi codigo para ver si pueden darme una idea de como solucionarlo,

var s1 = {
            label: '2017',
            borderColor: "rgba(220,20,20,1)",
            backgroundColor: "rgba(220,20,20,0.5)",
            data: [7,8,9]
        };
        var s2 = {
            label: '2018',
            borderColor: "rgba(110,10,10,1)",
            backgroundColor: "rgba(110,10,10,0.5)",
            data: [3,4,5]
        };
        var s3={
            label: '2019',
            borderColor: "rgba(12,10,10,1)",
            backgroundColor: "rgba(12,10,10,0.5)",
            data: [10,3,5]

        };
var s4 = {
            label: '2017',
            borderColor: "rgba(500,20,20,1)",
            backgroundColor: "rgba(500,20,20,0.5)",
            data: [7,8,9]
        };
        var config = {
            type: 'bar',
            data: {labels: ["Clientes", "Terminales"],
            datasets: [s1, s2, s3, s4]},
            options: {
                scales: {
      xAxes: [{
        stacked: true,
      }],
           yAxes: [
               {
                       stacked: true,
                   ticks: {
                       callback: function(label, index, labels) {
                           return '$' + label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                       }
                   }/*,//mostrarmos una nueva columna eje Y
                   scaleLabel: {
                       display: true,
                       labelString: 'Millones'
                   }*/
               }
           ]
    }
            }
        }

        var ctx = document.getElementById("barras").getContext("2d");
        window.myLine = new Chart(ctx, config);
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="barras" width="200" height="70"></canvas>

3
  • Se muestran como? Creo que te falto colocar la imagen de tu resultado
    – Anki Jedi
    Commented el 8 jun. 2021 a las 1:45
  • muestra como deseas ver el resultado para poder entenderte Commented el 8 jun. 2021 a las 3:18
  • Hola colegas, al resultado que quiero llegar es a la primer imagen que anexe en mi publicación las graficas de color azul y en la parte de abajo anexe mi código y al depurarlo muestra las graficas pero de forma encimada. no se que me este faltando en mi código para que se visualicen como estoy deseando. Commented el 8 jun. 2021 a las 14:52

1 respuesta 1

0

Estuve arreglando algunas cosas, más que todos tener la configuración stacked como false, como lo tenías en true, por ello te aparecían encimadas, de hecho encimada es la traducción aproximada de stacked. Luego los tick, los configuré a beginAtZero: true para que no inicie desde el mínimo valor que tienes en data que en este caso es 3, sino que la escala comience desde cero. Aquí te comparto el código.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GraphStack</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
</head>
<body>
    
    <canvas id="barras" width="200" height="70"></canvas>
    <script>
        var s1 = {
            label: '2017',
            borderColor: "rgba(220,20,20,1)",
            backgroundColor: "rgba(220,20,20,0.5)",
            data: [7,8,9]
        };
        var s2 = {
            label: '2018',
            borderColor: "rgba(110,10,10,1)",
            backgroundColor: "rgba(110,10,10,0.5)",
            data: [3,4,5]
        };
        var s3={
            label: '2019',
            borderColor: "rgba(12,10,10,1)",
            backgroundColor: "rgba(12,10,10,0.5)",
            data: [10,3,5]

        };
        var s4 = {
            label: '2017',
            borderColor: "rgba(500,20,20,1)",
            backgroundColor: "rgba(500,20,20,0.5)",
            data: [7,8,9]
        };
        var config = {
            type: 'bar',
            data: {labels: ["Clientes","Terminales" ],
            datasets: [s1, s2, s3, s4]},
            options: {
                scales: {
          xAxes: [{
            stacked: false,
          }],
           yAxes: [
               {
                       stacked: false,
                   ticks: {
                        beginAtZero:true,
                       callback: function(label, index, labels) {
                           return '$' + label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                       }
                   }/*,//mostrarmos una nueva columna eje Y
                   scaleLabel: {
                       display: true,
                       labelString: 'Millones'
                   }*/
               }
           ]
    }
            }
        }

        var ctx = document.getElementById("barras").getContext("2d");
        window.myLine = new Chart(ctx, config);
    </script>
</body>
</html>
4
  • gracias por el apoyo Jean, fue de mucha ayuda Commented el 8 jun. 2021 a las 19:01
  • Para servir! Si puedes da el voto a la respuesta para que la comunidad también pueda beneficiarse, dado que las que tienen más voto son las primeras en salir en Preguntas semejantes. Commented el 8 jun. 2021 a las 20:17
  • ya vote pero no se que pasa que al marcar un 1 la aplicación regresa el valor a un 0 Commented el 9 jun. 2021 a las 0:57
  • @FernandoMoysen no te preocupes, veo que la marcaste como respuesta aceptada y eso también vale. Es un gusto poder ayudar. Commented el 9 jun. 2021 a las 0:58

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.