jQuery flot.js 图例和网格选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10626882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flot.js Legend and Grid options
提问by Ace
Trying to run a very simple flot.js example, I have the following code to render the flot chart. (I am omitting all the non-essential HTML and CSS on purpose.)
尝试运行一个非常简单的 flot.js 示例，我有以下代码来呈现浮图图表。（我故意省略了所有非必要的 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>
The result looks like this:
结果如下所示：
(StackExchange does not allow me to post images yet, so the link above gets you straight to a screenshot of the chart.)
（StackExchange 还不允许我发布图片，所以上面的链接可以让你直接看到图表的屏幕截图。）
The little part next to the chart, where it says Legend, is another div (id="legendholder"), and that's where I want the legend to show up.
图表旁边的小部分，上面写着 Legend，是另一个 div (id="legendholder")，这就是我想要显示图例的地方。
I have had similar issues with grid options, and here's the part I don't understand:
我在网格选项方面遇到了类似的问题，这是我不明白的部分：
When I specify the option in the JavaScript, nothing seems to happen. The legend remains inside the chart. Then, I hard-code the legend settings in jquery.flot.js and everything works. Obviously, that's a total hack, but does anyone see what I'm doing wrong here?
当我在 JavaScript 中指定选项时，似乎什么也没发生。图例保留在图表内。然后，我对 jquery.flot.js 中的图例设置进行了硬编码，一切正常。显然，这是一个彻头彻尾的黑客，但有没有人看到我在这里做错了什么？
Yes, I have read the API documentation, poked around the flot.js github pages, but I have not been able to figure out what's causing my issues.
是的，我已经阅读了 API 文档，浏览了 flot.js github 页面，但我无法弄清楚是什么导致了我的问题。
Anyone?
任何人？
回答by Satyajit
The flot plotfunction should be called like this $.plot(placeholder, data, options);Legend is part of the options and not data which is what you have done in your code. Try this:
浮点plot函数应该像这样被调用$.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' }})
});?
回答by Miro
Replace
代替
legend: { show: true, container: $('#legendholder') },
legend: { show: true, container: $('#legendholder') },
with
和
legend: { show: true, placement: 'outsideGrid', container: $('#legendholder') },
legend: { show: true, placement: 'outsideGrid', container: $('#legendholder') },
