Параметры легенды и сетки 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>
Результат выглядит следующим образом:
![enter image description here]()
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') },