1

jquery棒グラフ、mansonary、svgなどを変更しようとすることで、探しているものに対して複数の「疑似ソリューション」を検索して思いつきましたが、誰かが私にとってより良い解決策を持っているかどうか尋ねるだけだと思いました. お願いします。

建物内のテナントがフロアごとに使用できるスペースのサイズまたはパーセンテージで表示するスタッキング プランを作成する必要があります。jpg による簡単な例のリンクを以下に含めました。リースの有効期限までにカラー コーティングして動的にする必要があります。ブロックをクリックして、id 変数を渡します。CSSブロックフロートが最も簡単に適用できるとは思いませんが、間違っている可能性があります。

ブロック画像

例は最良の説明です。レゴブロックの質問は近かったと思います。

4

1 に答える 1

0

プレーンな HTML を使用すると、これははるかに簡単ではありませんか? これに沿って：

<html>
  <head>
    <title></title>
    <style type="text/css">
      .floorName, .suites, .suite {display:inline-block}
      .floorName  {width:100px}
      .suites     {
        width:500px;
        height:100%;
      }
      .suite      {
        position:relative;
        color:white; 
        background-color:#FF9934;
        text-align:center;
        height:100%;
      }
      /* This draws the border around the suites */
      .suite:before {
        content:"";
        position:absolute;
        display:block;
        width:100%;
        height:100%;
        border:1px solid black;
        top:-1px;
        left:-1px;
      }
      .expire2012 {background-color:#3266CC}
      .expire2013 {background-color:#FE0000}
      .expire2014 {background-color:#99CC67}
      .expire2015 {background-color:#00FF01}
      .expire2016 {background-color:#993400}
    </style>
  </head>
  <body>
    <div class="floor">
      <div class="floorName">Floor 12</div>
      <div class="suites">
        <div style="width:100%" class="suite expire2012">Suite 1200</div>
      </div>
    </div>
    <div class="floor">
      <div class="floorName">Floor 11</div>
      <div class="suites">
        <div style="width:40%" class="suite">Suite 1100</div
        ><div style="width:40%" class="suite">Suite 1110</div
        ><div style="width:20%" class="suite expire">Suite 1120</div>
      </div>
    </div>
    <div class="floor">
      <div class="floorName">Floor 10</div>
      <div class="suites">
        <div style="width:100%" class="suite expire2013">Suite 1000</div>
      </div>
    </div>
    <div class="floor">
      <div class="floorName">Floor 9</div>
      <div class="suites">
        <div style="width:40%" class="suite expire2016">Suite 900</div
       ><div style="width:60%" class="suite expire2014">Suite 910</div>
      </div>
    </div>
  </body>
</html>
于 2012-12-01T22:07:57.177 に答える