0

テーブルを使用して棒グラフを作成しようとしていますが、これはほぼ自分の好みに合わせて完成しています。私が望む最後のステップは、バーを表す画像上のテキストです。小さな棒グラフを作成するためのこれまでのコードは次のとおりです。

$height = 50;

//build length
$width = 450;
$multi = $brewAvg / 5;
$width = $width * $multi;
print " <tr > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td > <img src=\"blueBar.png\"  width=\"$width\" height=\"$height\">  </td>  </tr> ";

そして、これは次のようなものを生成します:

ここに画像の説明を入力

醸造所の評価に基づいてバーの長さを単純に計算する方法をコードで確認できます。次にやりたいことは、左側の各醸造所の上に評価番号を表示することです。これを達成するにはどうすればよいですか？

アップデート：

ここで読んだチュートリアルを試しました：

http://www.kavoir.com/2009/02/css-text-over-image.html

コードを次のように変更しました。

print "<div class=\"overlay\"> ";
            print " <tr valign=\"middle\" > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td > <img src=\"blueBar.png\"  width=\"$width\" height=\"$height\">  </td>  </tr> ";
            print" 
                <div class=\"text\">
                <p> $brewAvg  </p>
                  </div>
                </div>
            ";

そして、私が追加したCSSはこれでした：

<style>
.overlay {
    position:relative;
    float:left; /* optional */
}
.overlay .text {
    position:absolute;
    top:10px; /* in conjunction with left property, decides the text position */
    left:10px;
    width:300px; /* optional, though better have one */
}


</style>

そして、それは私のイメージの一番上に価値のあるものを置きました. すべてのテキストは、次のようにすべてのバーの上のリストにあります。

ここに画像の説明を入力

回答のヘルプを使用した後、回答にマークを付けました。結果は次のとおりです。

ここに画像の説明を入力

あとは、グレーの背景が見栄えがよくなるように、すべてを垂直方向に中央揃えにする方法を考え出す必要があります。助けてくれてありがとう！

4

2 に答える 2

1

印刷コードを次のコードに置き換えることができます。

print " <tr > <td > $count.  <a href=\"$breweryURL\"> $brewR</a>  </td>   <td style=\"position: relative;\"> <img style=\"z-index: 8;\" src=\"blueBar.png\"  width=\"$width\" height=\"$height\"> <span style=\"position: absolute; top: 10px; left: 10px; color:#fff; z-index: 9; font-size: 14px;\">$brewAvg</span> </td>  </tr> ";

もちろん、適切なスタイルを CSS ファイルに移動できるようにハードコードしました。上、左を変更すると、評価番号のスパンを再配置できます。

于 2012-10-04T03:38:21.577 に答える
0

これを達成するために何らかの黒魔術を行う必要はありません..醸造所の名前と評価を同じに入れtd、おそらくdivで区切ってください。数字もatdにできるので、縦に並べることができます。何かのようなもの：

<td>1.</td>
<td>Rating<br><a>Company</a></td>
<td><img></td>
于 2012-10-04T03:38:31.800 に答える