javascript - jqPlotグラフをアコーディオンで

Question

jQueryアコーディオン内にグラフをプロットしたいのですが、グラフが切り刻まれ、スケールが表示されます。誰かがこれを修正しましたか？

score 6 · Accepted Answer

jqPlot のタブとアコーディオン UI ウィジェットのページで説明されているように、jqPlot はプロット時にチャートのサイズを知る必要があり、チャートがアコーディオンまたはタブによって非表示になっている場合はそれができません。解決策は、別の方法でグラフのディメンションを指定するかreplot、アコーディオンが展開されたときに呼び出すことです。詳細とサンプルコードについては、タブとアコーディオンの UI ウィジェットを参照してください。

score 3 · Accepted Answer

アコーディオン内のすべては、展開されるまで隠されています。つまり、アコーディオンは無次元です。アコーディオンチャートが含まれている DOM の部分が表示されるまで待ってから、グラフをプロットする必要があります。jqPlot の最新リリースに含まれている ui.html の例を見ると、次のように表示されます。

ここでは、非表示の jQuery UI タブ内にある chart1 という名前の div にプロットが作成されます。

plot1 = $.jqplot('chart1', [l1, l2, l3],  {
  title: "I was hidden",
  lengend:{show:true},
  series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}],
  cursor:{show:true, zoom:true},
  axesDefaults:{useSeriesColor:true}
});

そして、イベントハンドラーは、jQuery UI タブによって発生する「tabsshow」イベントに登録されます。あなたの場合、アコーディオンの状態の変更が完了すると、jQuery UI アコーディオンウィジェットによって発生する 'accordionchange' イベントのハンドラーを登録する必要があります。上記のコード例で、タブの「tabsshow」イベントにバインドする方法は次のとおりです。

$('#tabs').bind('tabsshow', function(event, ui) {
  if (ui.index == 1 && plot1._drawCount == 0) {
    plot1.replot();
  }
  else if (ui.index == 2 && plot2._drawCount == 0) {
    plot2.replot();
  }
});

同じ ui.html ファイルに、アコーディオンを使用した実際の例もあります。この例は、bitbucket の最新リリースjqplot.1.0.0a_r701にあります。

また、同じ div で複数の jqPlot オブジェクトをインスタンス化しないように注意してください。そうしないと、プロットが重なり合ってブラウザに過負荷がかかります。

score 1 · Accepted Answer

タブやアコーディオン要素などの非表示要素にはサイズがないため、jqplot のドキュメントに記載されている手法を使用することをお勧めします。

別の方法でグラフの寸法を提供する (例: data-height および data-width 属性) AND
グラフが表示されたら、replot() を呼び出します。

ただし、ドキュメントの例では、jquery-ui のバージョンによっては正しくないイベント名が使用されています。たとえば、Bootstrap 3 を使用する場合、適切なイベントの名前は「shown.bs.tab」とは異なります。

リンク:

javascript - jqPlotグラフをアコーディオンで

3 に答える 3

Related

Reference