4

以下にフロートグラフがあります。ラベルが凝縮されていることがわかります。すべてのラベルが表示されるように、目盛り間の幅を確保したいと考えています。マークアップは以下です。

<!-- Graph HTML -->
<div id="graph-wrapper">
  <div class="graph-info">
    <a href="#" id="bars"><span></span></a><a href="#" id="lines" class="active"><span></span>
    </a>
  </div>
  <div class="graph-container">
    <div id="graph-lines" style="width: 95%; height: 80%;">
    </div>
    <div id="graph-bars" style="width: 95%; height: 80%;">
    </div>
  </div>
  <div id="series-check" class="graph-info bottom">
  </div>
</div>
<!-- end Graph HTML -->

JS:

var ticks = [];
    for (var i = 0; i < graphData[0].data.length; i++) {
        ticks.push(graphData[0].data[i][0]);
    }
$.plot($('#graph-lines'), graphData, {
        series: {
            points: {
                show: true,
                radius: 5
            },
            lines: {
                show: true
            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: '#fff',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            //tickColor: 'transparent',
            //tickDecimals: 2, 
            mode: "time",
            ticks: ticks,
            timeformat: options["timformat"], // "%h:%M
             min: new Date(options["GraphMinXValue"]), // min milliseconds from data
             max: new Date(options["GraphMaxXValue"]) //max milliseconds from data
        },
        yaxis: {
           min: 0,
           show: true
        },
        pan: {

            interactive: true
        },
        zoom: {

            interactive: false
        }
    });

フロット グラフ

ウィンドウのサイズ変更でグラフのサイズを変更できるようにするには、グラフのパーセンテージが本当に必要ですが、グラフを自動的に大きくするための目盛りの間隔が必要です。含まれている div に overflow:hidden があり、パンを使用して、ユーザーが非表示のオーバーフローを表示できるようにします。これを修正する方法はありますか？

4

2 に答える 2

2

問題が解決するように minTickSize を選択することをお勧めします。しかし、特定のティック サイズ、つまり 1 時間ごとのティックを使用する必要がある場合、2 つの可能な解決策は、ティックをずらしたり角度を付けたりするか、キャンバス サイズを大きくすることです。

Flot は、既定ではスタガリング/アングル ティックをサポートしていませんが、Mark Cote のflot-tickrotorのように役立つプラグインがあります。ただし、これはまだ Flot 0.8-final では機能しません。

プロット サイズを大きくする限り、Flot は目盛りの数に基づいてプレースホルダーを自動的に大きくすることはできません。自分で増やす必要があります。プロットをパンするために overflow:hidden div を使用している場合、おそらく実際に使用する必要があるのは、ナビゲート プラグインです。

于 2013-06-20T10:52:30.597 に答える
0

私が最近使用した回避策は、目盛りを 1 つおきに ' ' (単一のスペース) に設定することでした。グラフは、これが実際の値ではないことを認識しているように見え、実際の値で目盛りを適切に配置しました。Web ページが小さな画面上にあるときに、サイズを変更する目的で個人的にこれを行いました。

グラフのスクリーンショット

于 2018-07-05T19:30:10.750 に答える