Warum rendert mein JQPlot keine Leinwand?

Question

Ich versuche, JQPlot für ein Balkendiagramm zu verwenden, und ich kann es nicht dazu bringen, irgendetwas zu zeigen.

Ich habe den JQPLOT -Code und alle Plugins aufgenommen. Ich erhalte überhaupt keine Fehler

Ich habe den Beispielcode direkt kopiert:

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);

Die Klasse 'JQPlot-Target' zum 'JQPlot' Div fügen, sodass das JavaScript funktionieren muss, aber es fügt der DIV keine Leinwand/Diagramm hinzu. Es zeigt nur eine leere DIV mit der hinzugefügten Klasse an.

Irgendwelche Ideen, warum das nicht rendert?

Ich verwende auch HTML5Boilerplate, aber ich kann mit den beiden keine bekannten Probleme finden.

Vielen Dank,

Thomas

Answer 1

Ich fand das Problem. Ich hatte das Hauptcontainer -Div, in dem sich der JQPlot befindet, um anzuzeigen: Keine auf der Seite Laden und sobald Sie auf die Schaltfläche "Eingabetaste" angezeigt werden, wird mit .fadein () angezeigt ()

Ich nehme an, es kann die Leinwand nicht hinzufügen, wenn das übergeordnete An Display angezeigt wird: keine; - Ich habe es funktioniert, indem ich den $ .jQPlot in der Funktion aufgerufen habe, die im Hauptcontainer verblasst, nachdem der Benutzer geklickt hat.

Answer 2

Können Sie zeigen, was Ihr CSS mit der Klasse "Handlung" tut? Das JQPLOT -Nutzungsseite sagt, dass Sie dem Handlungziel unbedingt Breite und Höhe hinzufügen müssen.

Answer 3

Verwenden Sie das Wiederholung Funktionieren Sie in der generierten Tabelle, wenn Sie auf Ihre Schaltfläche klicken.

// 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

Ich habe dieses Problem früher gestoßen, aus irgendeinem Grund würde der folgende JQPlot -Code nicht funktionieren:

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

Als ich jedoch das $ (dokument).

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