Параметры легенды и сетки flot.js

Пытаясь запустить очень простой пример flot.js, у меня есть следующий код для рендеринга флота. (Я специально намерен исключить все ненужные HTML и CSS.)

<div id="chartWrapper1">
<div id="placeholder"></div>
<div id="legendholder">Legend Container</div>
</div>

<script type="text/javascript">
$(function () {
var disk1 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"), [{
      legend: { show: true, container: $('#legendholder') },
      label: "Disk 1",
      data: disk1,
      lines: { show: true, fill: true }
    }]);
});
</script>

Результат выглядит следующим образом:

http://bit.ly/JTR3Bd

(StackExchange не позволяет мне размещать изображения, так что ссылка выше дает вам прямо на скриншот диаграммы.)

Маленькая часть рядом с диаграммой, где она говорит "Легенда", является еще одним div (id = "legendholder" ) и тем, где я хочу, чтобы легенда отображалась.

У меня были похожие проблемы с параметрами сетки, и вот часть, которую я не понимаю:

Когда я укажу опцию в JavaScript, ничего не происходит. Легенда остается внутри диаграммы. Затем я жестко программирую настройки легенды в jquery.flot.js, и все работает. Очевидно, что общий взлом, но кто-нибудь видит, что я здесь делаю неправильно?

Да, я прочитал документацию по API, ткнул по страницам gitub flot.js, но мне не удалось выяснить, что вызывает мои проблемы.

Кто-нибудь?

Ответ 1

Функция флота plot должна быть вызвана так: $.plot(placeholder, data, options); Легенда является частью опций, а не данными, которые вы сделали в своем коде. Попробуйте следующее:

$(function () {
    var disk1 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"), [{
      label: "Disk 1",
      data: disk1,
      lines: { show: true, fill: true }
    }], 
    {legend: { show: true, container: '#legendholder' }})
});

Ответ 2

Заменить

legend: { show: true, container: $('#legendholder') },

с

legend: { show: true, placement: 'outsideGrid', container: $('#legendholder') },