Круговая диаграмма флота дает ошибку в firebug: "uncaught exception: недопустимые размеры для графика, width = null, height = null"

Ответ 1

Отметьте:

• Сначала вы включаете библиотеку jQuery, а затем библиотеку flot js

• Оберните весь код в функции обработчика $(document).ready().

• вы привязываете флот с правильным id, и нет повторения одного и того же id.

• если ваш div является динамическим, то появился DOM после загрузки страницы, затем привяжите plot() после элемент появился в DOM.

Ответ 2

У меня также была та же проблема. Я установил высоту и ширину тега <div> и исправил ошибку.

Вы можете использовать встроенный css (как я) или JS для установки высоты и ширины. Но функцию plot() следует вызывать только после того, как мы установим высоту <div>

<div class="bars_two" style="height:300px;"></div>

Ответ 3

У меня тоже была эта проблема! Ответ не был указан выше, так что вот моя проблема и решение.

<div id="chart" class="chart" style="width:100%;height:250px;"></div>

JavaScript:

 <script type="text/javascript">
    $(document).ready(function () {
        var data = [...];
        var options = {...};
        $.plot($("#placeholder"), data, options);
    });
</script>

Итак. Обратите внимание на функцию графика. Сначала у меня не было # в первом параметре. Это необходимо, по-видимому. Он решил мои проблемы.

GG.

Ответ 4

Быстрое решение, которое я нашел, - просто набрать что-то между тегами div. Например: + Изменить <div id="placeholder"></div> в <div id="placeholder">.</div> или <div id="placeholder">randomtext</div>.

Лично я обнаружил, что использование пробелов/вкладок/новых строк не работает в этом быстром решении.

Ответ 5

У меня была та же проблема, что и интеграция шаблона с рельсами. Это плохо, но я просто комментирую строку, которая генерирует исключение и добавляет 2 строки, чтобы установить ширину и высоту в 0 - это мне помогло.

Canvas.prototype.resize = function(width, height) {

  if (width <= 0 || height <= 0) {
    // COMMENTED NEXT LINE
    // throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
    // NEW LINES ADDED
    width = 0;
    height = 0;
  }

  // ... others code 
}

Ответ 6

Если вы поместите диаграмму html в div, которой задан класс "display: none", вы получите эту ошибку. Вы должны поместить свой html диаграммы в div, которому присваивается класс "display: block", когда загружается "jquery.flot.js".

<div id="pie_chart" class="chart"> </div>

если этот html находится в любом div, который имеет class="display: none", когда загружается "jquery.flot.js", измените его на display: block

Ответ 7

Итак, кажется, что перед отображением диаграммы вам нужно повторно выбрать элемент DOM. Так как флот манипулирует элементами и вставляет свои собственные, похоже, что он заменяет элемент своими собственными элементами.

В рендере выполните следующие действия:

$.plot($(".myChartId || #myChartClass"), myData, myOptions);

Это не имеет никакого отношения к тому, чтобы быть в $(document).ready(), хотя это хорошая практика, чтобы поместить его внутри этого.

Надеюсь, это поможет!