¿Por qué mi JQPlot no está renderizando un lienzo?

Question

Estoy tratando de usar JQPlot para un gráfico de barras y no puedo hacer que muestre nada.

He incluido el código JQPLOT y todos los complementos. No estoy recibiendo ningún error

He copiado el código de ejemplo directamente:

HTML:

<div id="jqplot" class="plot">

</div>

JavaScript:

"use strict";
(function ($){

        $.jqplot('jqplot',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

})(jQuery);

Está agregando la clase 'JqPlot-Target' al Div 'JqPlot', por lo que el JavaScript debe estar funcionando, pero no está agregando un lienzo/gráfico al DIV, muestra solo un DIV vacío con la clase agregada.

¿Alguna idea de por qué esto no es representar?

También estoy usando html5boilerplate, pero no puedo encontrar ningún problema conocido con los dos.

Gracias,

Thomas

Answer 1

Encontré el problema. Tenía el contenedor principal div de que el JQPlot está instalado para mostrar: ninguno en la carga de la página y una vez que hace clic en el botón 'Enter' se muestra con .fadein ()

Supongo que no puede agregar el lienzo cuando se exhibe el padre: ninguno; - Tengo que funcionar llamando al $ .jqplot dentro de la función que se desvanece en el contenedor principal después de que el usuario hace clic en ingresar ...

Answer 2

¿Puedes mostrar lo que tu CSS está haciendo a la clase "trama"? los página de uso de JQPLOT Dice que debe asegurarse de agregar ancho y altura al objetivo de la trama.

Answer 3

Utilizar el reponer Funcionar en el gráfico generado, cuando haga clic en su botón.

// create your chart
var plot1 = $.jqplot(...);

// hook the button press
$("button#enter").on("click", function(){
    // fade your tab in, wait for it to complete,
    $(".tab").fadeIn(1000, function(){
        // then replot, if not already drawn
        if(!plot1._drawCount){
            plot1.replot();
        }
    });
});

http://www.jqplot.com/deploy/dist/examples/hiddenplotsintabs.html

Answer 4

Me encontré con este problema antes, por alguna razón, el siguiente código JQPLOT no funcionaría:

$(document).ready(function () {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}

Sin embargo, cuando cambié el $ (documento) .Ready (function {...} a jQuery (function ($) {..} El código JQPlot funcionó correctamente.

jQuery(function ($) {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}