Как сделать флот отзывчивым?

В следующей скрипте:

http://jsfiddle.net/jamitzky/9x7aJ/

Как изменить ширину графика, если изменяется ширина окна?

код:

$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

$.plot($("#placeholder"), [ d1, d2, d3 ]);
});

Ответы

Ответ 1

Попробуйте что-то вроде этого:

Флот будет автоматически рисовать в контейнере. Таким образом, если ваш div будет реагировать, Флот будет реагировать.

http://jsfiddle.net/9x7aJ/2029/

тогда все, что вам нужно сделать, это перерисовать флот, если ваше окно изменяет размер:

Вы можете посмотреть, изменилось ли окно с помощью:

    window.onresize = function(event) {
    ...
}

(см.: событие изменения размера окна JavaScript)

Ответ 3

Просто включите jquery.flot.resize.min.js script из https://github.com/flot/flot на своей странице. Он станет отзывчивым.

Ответ 4

У меня была та же проблема, и решение было:

<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.resize.js"></script>
<script src="./jquery.flot.axislabels.js"></script>

Ответ 5

Просто используйте некоторые css. Любой современный браузер может использовать (inline, stylesheet):

<div id="chart" style="width: 100%!important"></div>