flot.js 图例和网格选项答案

【问题标题】：flot.js Legend and Grid optionsflot.js 图例和网格选项
【发布时间】：2015-11-28 07:12:11
【问题描述】：

尝试运行一个非常简单的 flot.js 示例，我有以下代码来呈现 flot 图表。（我故意省略了所有非必要的 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 还不允许我发布图片，所以上面的链接可以让您直接看到图表的屏幕截图。）

图表旁边的小部分显示 Legend，是另一个 div (id="legendholder")，这就是我希望显示图例的地方。

我在网格选项方面遇到过类似问题，这是我不明白的部分：

当我在 JavaScript 中指定选项时，似乎什么也没发生。图例保留在图表内。然后，我在 jquery.flot.js 中对图例设置进行硬编码，一切正常。显然，这完全是 hack，但是有没有人看到我在这里做错了什么？

是的，我已经阅读了 API 文档，浏览了 flot.js github 页面，但我无法弄清楚是什么导致了我的问题。

有人吗？

【问题讨论】：

那么到底是什么问题？您想将图例移到图表之外吗？它有效 - jsfiddle.net/UEePE/1670
咳咳，不要粗鲁或任何 Zoltan Toth，但它甚至在您设置的 jsfiddle 中都不起作用。不过，谢谢你的尝试。如果您愿意，我可以在我的系统上截屏以显示问题。也许只有我？
马克，感谢您将图片嵌入到帖子中。你摇滚！

标签： jquery flot

【解决方案1】：

flot 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' }})
});

【讨论】：

感谢您指出我的语法问题，Satyajit。现在一切都按照我的意愿工作。多亏了你，即使是我的“网格”问题现在也得到了解决。我非常感谢。非常感谢。

【解决方案2】：

替换

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

与

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

【讨论】：