Canvas 集合：在桌子的一个单元中的画布_Canvas_Rally

Canvas 集合：在桌子的一个单元中的画布

canvas rally

Canvas 集合：在桌子的一个单元中的画布,canvas,rally,Canvas,Rally,我试着在我桌子的一个格子里画一条横线一切正常，但每次我更改浏览器窗口大小时，我的元素都会丢失。手动更改单元格大小时也会发生同样的情况有人能帮忙吗我的画布是这样构建的在HTML中： <canvas id='0' width='260' height='10'> </canvas> 不幸的是，rally.sdk.ui.Table组件在发生调整大小事件时会重新绘制单元格。调整大小时，正在绘制的画布元素将替换为新的画布元素您可以使用html和css在单元格中创建一个

我试着在我桌子的一个格子里画一条横线

一切正常，但每次我更改浏览器窗口大小时，我的元素都会丢失。手动更改单元格大小时也会发生同样的情况

有人能帮忙吗

我的画布是这样构建的

在HTML中：

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

不幸的是，

rally.sdk.ui.Table

组件在发生调整大小事件时会重新绘制单元格。调整大小时，正在绘制的画布元素将替换为新的画布元素

您可以使用html和css在单元格中创建一个栏，而不是使用画布进行绘制

将此html嵌入要显示为条形图而不是画布元素的属性中：

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

50%

并添加以下样式：

<style type="text/css">

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

</style>


.bar.完成{
文本对齐：居中；
背景色：#EDB5B1；
}

希望这能给你你想要的。以下是完整的应用程序代码，其中仅包含虚拟数据：

<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>


使用CSS示例完成的百分比
.bar.完成{
文本对齐：居中；
背景色：#EDB5B1；
}
rally.addOnLoad（函数（）{
var table=new rally.sdk.ui.table（{
栏目：[
{key:'name'，header:'name'，width:100}，
{键：“完成百分比”，标题：“完成百分比”，宽度：100}
]
});
table.addRows([
{
名称：“测试1”，
完成百分比：“50%”
},
{
名称：“测试2”，
完成百分比：“70%”
}
]);
表。显示（“容器”）；
});

<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>