Почему мой jqplot не рендеринг холста?

Question

Я пытаюсь использовать JQPLOT для гистограммы, и я не могу заставить его показать что -либо.

Я включил код JQPLOT и все плагины. Я не получаю никаких ошибок

Я напрямую скопировал пример кода:

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

Он добавляет класс «jqplot-target» в Div 'jqplot, поэтому JavaScript должен работать, но он не добавляет холст/диаграмму в Div, он отображает только пустой дивинг с добавленным классом.

Есть идеи, почему это не рендеринг?

Я также использую HTML5BoilerPlate, но я не могу найти никаких известных проблем с ними.

Спасибо,

Томас

Answer 1

Я нашел проблему. У меня был основной контейнер -дивизион, который JQPLOT находится внутри установленного для отображения: нет на загрузке страницы, и как только вы нажимаете кнопку «Введите», показывает .fadein ()

Я полагаю, он не может добавить холст, когда родитель отображается: нет; - У меня есть это, чтобы работать, позвонив в $ .jqplot внутри функции, которая исчезает в основном контейнере после того, как пользователь нажимает введите ...

Answer 2

Можете ли вы показать, что ваш CSS делает с классом «сюжет»? А Страница использования JQPLOT Говорит, что вы должны быть уверены, что добавить ширину и высоту в цель сюжета.

Answer 3

Использовать переполнять Функция на сгенерированной диаграмме, когда вы нажимаете на свою кнопку.

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

Я столкнулся с этим вопросом ранее, по какой -то причине следующий код JQPLOT не сработает:

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

Однако, когда я переключил $ (document) .ready (function {...} на jQuery (function ($) {..} код JQPLOT работал правильно.

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