1

テーブルのセルにバーを描画しようとしました。

すべて正常に動作しますが、ブラウザー ウィンドウのサイズを変更するたびに要素が失われました。セルサイズを手動で変更しても同じことが起こります。

誰かが助けることができますか？

私のキャンバスはこのように構築されています

HTML の場合:

<canvas id='0' width='260' height='10'> </canvas>

Javascript の場合:

var canvas = document.getElementById(0);


            if (canvas && canvas.getContext) {
                 ctx = canvas.getContext('2d');

           if (ctx) {

                          ctx.strokeStyle = 'red';
                          ctx.stroke();
                          ctx.fillStyle = '#8b0000';
                          ctx.fill();


                         ctx.font = "Bold 11px Arial";

                         ctx.fillText("Test", canvas.width - 248, canvas.height);




                            }
                        }
4

1 に答える 1

3

残念ながら、rally.sdk.ui.Tableサイズ変更イベントがあると、コンポーネントはセルを再描画します。サイズを変更すると、描画しているキャンバス要素が新しいキャンバス要素に置き換えられます。

キャンバスを使用して描画する代わりに、html と css だけでセルにバーを作成できます。

ここに画像の説明を入力

canvas 要素の代わりにバーとして表示したいプロパティに、この html を埋め込みます。

<div class="bar"> 
    <div class="percentDone" style="width: 50%">50%</div> 
</div>

これらのスタイルも追加します。

<style type="text/css">

    .bar .percentDone {
        text-align: center;
        background-color: #EDB5B1;
    }

</style>

うまくいけば、それはあなたが探しているものをあなたに与えるでしょう. ダミー データのみを含む完全なアプリ コードを次に示します。

<html>
<head>
   <title>Percent Done with CSS example</title>
   <meta name="Name" content="Percent Done with CSS example" />

    <style type="text/css">

        .bar .percentDone {
            text-align: center;
            background-color: #EDB5B1;
        }

    </style>

   <script type="text/javascript" src="/apps/1.31/sdk.js"></script>
   <script type="text/javascript">

    rally.addOnLoad(function(){

        var table = new rally.sdk.ui.Table({ 
            columns: [
                {key: 'name', header: 'Name', width: 100}, 
                {key: 'percentDone', header: 'Percent Done', width: 100}
            ]
        });

        table.addRows([
            {
                name: 'Test 1',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 50%">50%</div></div>'
            },
            {
                name: 'Test 2',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 70%">70%</div></div>'
            }
        ]);

        table.display('container');

    });

   </script>
</head>
<body>
   <div id="container"></div>
</body>
</html>
于 2012-03-27T16:49:40.997 に答える