14

尝试运行一个非常简单的 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 页面，但我无法弄清楚是什么导致了我的问题。

任何人？

4

2 回答 2

23

plot应该像这样调用flot函数$.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' }})
});​
于 2012-05-16T22:42:12.850 回答
2

代替

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

和

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

于 2014-02-24T08:54:05.923 回答