0

Saludos , tengo el siguiente problema:

Estoy haciendo un gráfico de gauge , utilizando el script Gauge.js , sobre una ventana Modal de Bootstrap 3. A este modal le agrego una vista proveniente de laravel. El problema que tengo es que cuando despliego el modal , no se dibuja el gráfico gauge (que utiliza un canvas). La verdad no tengo idea que puede ser , me tiene extrañado el problema. Dejo los scripts:

html

  <div id="titulo_container" class="titulo-Grafico"></div>
      <canvas id="gaugeChart" width="400" height="200" style="width:100%;"></canvas>
       <label class="" style="font-size: 40px; margin-left:160px;" id="gauge-value"></label>
  </div>

Javascript:

 $.get('/monitoreo/enproceso', function(json) {
        //console.log(json.view);
      $('#modalGraficos').empty();
      $('#modalGraficos').append(json.view);
      var optionsProceso = {
        responsive: true,
        barValueSpacing: 1,
        maintainAspectRatio: true,
        animation: {
            duration: 1000
        },
        legend: {
            position: 'bottom',
        },
        stacked: true,
        yAxes: {
            display: false,
        },
        xAxes:{
            display: false
        },
        scales: {
            yAxes: [{
                stacked: true,
                scaleShowVerticalLines: false,
                barPercentage: 0.5,
                categoryPercentage: 0.8,
                gridLines: {
                    display:false,
                    drawOnChartArea:false,
                    offsetGridLines:true
                }
            }],
            xAxes: [{
                showLines: false,
                stacked: false,
                ticks: {
                    beginAtZero: true,
                    mix: 0,
                    max: 100,
                    stepSize: 10
                },
                gridLines: {
                    display:false,
                    drawOnChartArea:false,

                }
            }]
        },
        tooltips: {
            mode: 'index',
            intersect: true,
            callbacks: {
                  label: function(tooltipItems, data) {
                      return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.xLabel+ '%';
            }
        }
        },
      }
      var chrProceso = document.getElementById("chartProceso");
      var target = document.getElementById('gaugeChart');
      var gaugeDiv = document.getElementById("gauge-value");
      var dataProceso = {
          labels: ["Etapa 1" , "Etapa 2" , "Etapa 3" , "Etapa 4" , "Etapa 5" , "Etapa 6"],
          datasets: [{
              label: "% de Avance",
              data: [0,0,0,0,0,0],
              backgroundColor: ['#fda128' , '#fda128' , '#fda128' , '#fda128', '#fda128' , '#fda128']
          }, {
            label: "Total",
            data: [0,0,0,0,0,0],
            backgroundColor: ['#264B59' , '#264B59' , '#264B59', '#264B59' , '#264B59' , '#264B59']
          }],
      };
      var gaugeOpt = {
          lines: 12,
          angle: 0.0,
          lineWidth: 0.44,
          pointer: {
              length: 0.7,
              strokeWidth: 0.035,
              color: '#000000'
          },
          fontSize: 15,
          limitMax: 'false',
          percentColors: [
              [0.0, "#d9534f"],
              [0.50, "#f0ad4e"],
              [1.0, "#5cb85c"]
          ], // !!!!
          strokeColor: '#E0E0E0',
          generateGradient: true // Fill color
      };
      var chrProcesoConfig = {
        type: 'horizontalBar',
        data: dataProceso,
        options: optionsProceso
      };
      var gauge = new Gauge(target).setOptions(gaugeOpt);
      var procesoBar = new Chart(chrProceso, chrProcesoConfig);
      console.log(gauge);
      gauge.maxValue = 100;
      gauge.minValue = 0;
      gauge.setMinValue(0);
      gauge.animationSpeed = 32;
      gauge.set(null);
      gaugeRender(gauge, gaugeDiv);
      $('#modal').modal();
    });

});

De antemano muchas gracias.

2
  • A mí me está pasando lo mismo pero con d3 en backbone al pintar gráficas en modales de Bootstrap. Mirando, resulta que intenta pintar la gráfica antes de que exista el contenedor donde se debe pintar. Por el momento no te puedo ser de más ayuda, sólo he conseguido que funcione poniendo un setTimeout para que espere a que la modal esté completamente renderizada para que pinte la gráfica. No es lo más práctico o bonito pero es una solución mientras encuentro otra. Un saludo. el 13 dic. 2017 a las 10:31
  • Efectivamente estas intentado crear un gauge sobre un modal que aun no está formado, una opcion es un setTimeout pero existe un evento especifico para las ventanas modales llamado shown.bs.modal, que espera a que el modal se construya y muestre, construye el gauge dentro de este evento y deberia de funcionar correctamente. el 13 dic. 2017 a las 12:34

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.