jquery - flot.js 图例和网格选项

Question

尝试运行一个非常简单的 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 还不允许我发布图像，因此上面的链接可让您直接看到图表的屏幕截图。)

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

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

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

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

有人吗？

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