1

ゼロから面グラフを作成します。X 軸が上にあり、各セルの時間の下になるように、時間エントリごとに「AM」と「PM」修飾子をラップする必要があります。ただし、セルのサイズを変更することはできません。TD 幅は CSS で 4% に設定されています (合計で 25 の時間セグメント。これにより、ウィンドウ サイズを変更しても等間隔に保たれます)。各セルの開始位置と終了位置を計算して、キャンバス上のストローク座標を決定します。下に行きます。

それで、それぞれをラップする方法はありますか？

元：

12:00  1:00
  PM    PM

幅を 4% に設定すると、幅が 2 桁で囲まれていることがわかります。ただし、各 1 桁の時間エントリの前に 0 を付けたくはありません。

コード：

<table id="timeline">
<tr>
    <td class="0">12:00 AM</td><td class="1">1:00 AM</td><td class="2">2:00 AM</td><td class="3">3:00 AM</td><td class="4">4:00 AM</td><td class="5">5:00 AM</td><td class="6">6:00 AM</td><td class="7">7:00 AM</td>
    <td class="8">8:00 AM</td><td class="9">9:00 AM</td><td class="10">10:00 AM</td><td class="11">11:00 AM</td><td class="12">12:00 PM</td><td class="13">1:00 PM</td><td class="14">2:00 PM</td><td class="15">3:00 PM</td>
    <td class="16">4:00 PM</td><td class="17">5:00 PM</td><td class="18">6:00 PM</td><td class="19">7:00 PM</td><td class="20">8:00 PM</td><td class="21">9:00 PM</td><td class="22">10:00 PM</td><td class="23">11:00 PM</td>
    <td class="24">12:00 AM</td>
</tr>

(計算のために後で個別に呼び出す必要があるため、各 td にはクラスがあります)

4

1 に答える 1

0

すべての td に対して既に異なるクラスがあるため、次のように書くことができます。

td:after {
    top: 20px;
    left: -25px;
    position: relative;
}

.c0:after {
   content: "PM"; 
}

.c1:after, 
.c2:after,
.c3:after {
    content: "AM";

}

つまり、実際の td の下にスタイル設定された疑似要素として AM および PM ラベルを生成します。

テーブルは AM / PM テキストから取り除かれます:

<table id="timeline">
<tr>
<td class="c0">12:00</td>
<td class="c1">1:00</td>
<td class="c2">2:00</td>

クラス名を文字で始まるように変更しました。

Jsfiddle でのデモ

于 2013-03-25T20:03:11.287 に答える