1

Flotを使用していくつかの棒グラフを描画しています。ユーザーがズームアウトしたときに、グラフが下部のグラフではなく上部のグラフのように表示されるようにズームを構成するにはどうすればよいですか？つまり、グラフのすべてのデータが表示されているときに、ユーザーがズームアウトを続けてほしくないのです。また、チャートがX軸に0未満のものを表示しないように制限したいと思います。以下の私のコードとチャートの写真を参照してください。

<#macro barChart2 var formatFunction ticks="" optionLegend="{ show: false }">
  var options = {
    yaxis: {
      tickFormatter: ${formatFunction}
    },
    series: {
      stack: 0,
      bars: { 
        show: true,
        barWidth: 0.9,
        align: "center"
      }
    },
    grid : { 
      hoverable: true 
    },
    xaxis: {
      <#if "${ticks}" != "">
        ticks: ${ticks}
      </#if>
      mode: "time",
      timeformat: "%b %d, %H:%M %P"
    },
    pan : { 
      interactive: true 
    },
    legend: ${optionLegend}
  };

  var plot${var} = $.plot($("#chart${var}"), data, options);

  $("#zoomIn${var}").click(function(e) {
    e.preventDefault();
    plot${var}.zoom();
  });

  $("#zoomOut${var}").click(function(e) {
    e.preventDefault();
    plot${var}.zoomOut();
  });
</#macro>

ここに画像の説明を入力してください

4

1 に答える 1

2

ナビゲーションプラグインで設定できるパラメータを確認することzoomRangeをpanRangeお勧めします。次のように軸に指定します。

xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] }

ここでzoomRange、ズームの制限を設定します。この場合、最小値と最大値の差が0.1を下回ることはなく、10を超えることもありません。panRangeコンテンツが特定の範囲内にとどまるように指示するため、この場合、どちらの軸も-10未満または10を超えることはありません。

時系列データでこれをどのように行うかはわかりませんが、最初にjavascriptタイムスタンプを試してみてください。

于 2012-06-06T07:07:26.277 に答える