Почему мой jqPlot не рендерит холст? - PullRequest
Новая
       4

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

3 голосов
/ 30 ноября 2011

Я пытаюсь использовать 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);

Itдобавляет класс 'jqplot-target' в div 'jqplot', поэтому должен работать javascript, но он не добавляет холст / диаграмму в div, он отображает только пустой div с добавленным классом.

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

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

Спасибо,

Томас

Ответы [ 4 ]

5 голосов
/ 04 августа 2012

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

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

2 голосов
/ 30 ноября 2011

Можете ли вы показать, что ваш CSS делает с классом "plot"?На странице jqPlot Usage сказано, что вам нужно обязательно добавить ширину и высоту к цели графика.

0 голосов
/ 03 июня 2014

Я столкнулся с этой проблемой ранее, по какой-то причине следующий код 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]]]);
}
0 голосов
/ 19 сентября 2013

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

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

...