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); Legend是选项的一部分,而不是您在代码中所做的数据.试试这个:

$(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' }})
});?