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に凡例の設定をハードコーディングすると、すべてが機能します。明らかに、それは完全なハックですが、私がここで間違っていることを誰かが見ていますか？

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

誰？

4

2 に答える 2

23

flotplot関数は、この$.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 に答える