Как отобразить пустой график с помощью Flot - PullRequest
Новая
       30

Как отобразить пустой график с помощью Flot

2 голосов
/ 03 января 2012

Так же, как указано в заголовке, я хочу отобразить пустой «шаблонный» график (под которым я подразумеваю, что веб-страница будет отображать график без каких-либо линий на нем) для финансового калькулятора, который я создаю дляРабота.Базовая настройка веб-страницы будет иметь пустой график вверху с HTML-формой ниже, чтобы принять ввод данных.Когда пользователь вводит данные и нажимает кнопку «Отправить», график должен заполниться этими данными.

Из этого возникает два вопроса.Во-первых, возможно ли это?Во-вторых, если это возможно, что я передам в функцию $ .plot ()?Вот с чем я работаю до сих пор: 

<div id="main-content">
    <div id="chart" style="width:600px;height:300px;"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            $.plot($("#chart"), [[null]]);
        });
    </script>
</div>

Любой совет будет принят с благодарностью!Спасибо!

РЕДАКТИРОВАТЬ: Я забыл упомянуть об этом.Когда я захожу на эту веб-страницу, Firebug выдает мне следующее сообщение об ошибке:

необработанное исключение: неверные размеры для графика, ширина = 928, высота = 0

РЕДАКТИРОВАТЬОТВЕТ: Похоже, что сообщение об ошибке пришло от меня, используя атрибуты ширины и высоты div, вместо того, чтобы придавать им ширину и высоту.После исправления это работает!Весь код, отображаемый здесь, теперь работает правильно.

1 Ответ

7 голосов
/ 03 января 2012

Просто отбросьте ноль. Если вы хотите пустое поле, не передавайте массивы данных: 

$(document).ready(function() {
  $.plot($("#chart"), []);
});

Если вы хотите «график» без данных, передайте пустой массив данных: 

$(document).ready(function() {
  $.plot($("#chart"), [[]]);
});

enter image description here

Рабочий код: 

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <script data-require="flot@0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
</head>

<body>
  <div id="chart" style="width:200px; height:200px"></div>
  <script>
    $(document).ready(function() {
      $.plot($("#chart"), [
        []
      ]);
    });
  </script>
</body>

</html>
...