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

应该像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' }})
});​

Answer 2

替换

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

与

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