web-dev-qa-db-ja.com

flot.jsの凡例とグリッドのオプション

非常に単純な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>

結果は次のようになります。

enter image description here

http://bit.ly/JTR3Bd

（StackExchangeではまだ画像を投稿できないため、上のリンクからチャートのスクリーンショットに直接アクセスできます。）

グラフの横にある[凡例]と表示されている小さな部分は、別のdiv（id = "legendholder"）であり、ここに凡例を表示します。

グリッドオプションについても同様の問題が発生しましたが、理解できない部分は次のとおりです。

JavaScriptでオプションを指定しても、何も起こらないようです。凡例はチャート内に残ります。次に、jquery.flot.jsで凡例設定をハードコーディングすると、すべてが機能します。明らかに、それは完全なハックですが、私がここで間違っていることを誰かが見ていますか？

はい、私はAPIドキュメントを読み、flot.js githubページをざっと見てきましたが、問題の原因を特定できませんでした。

誰でも？

jqueryflot
14
Ace

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

交換

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

と

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

2
Miro