Question

我有一张桌子。我试图在tally box列中显示我创建的html画布。我有10条记录，所以画布应该在表格内显示10次。这是我到目前为止所做的：

＆＃13;

var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");

function Vertical_2px_Red() {
for (i=0;i<10;i++){
c4_context.beginPath();
c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(100+i*100, 20);

c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(20+i*100, 100);

c4_context.moveTo(100+i*100, 20);
c4_context.lineTo(100+i*100, 100);

c4_context.moveTo(20+i*100, 20);
c4_context.lineTo(100+i*100, 100);

c4_context.moveTo(100+i*100, 100);
c4_context.lineTo(20+i*100, 100);
c4_context.strokeStyle = "Red";
c4_context.stroke();
}
}

＆＃13;

My html form:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-table">
    <table border="1" width="100%">
        <thead>
            <tr>
                <td>{{label.table.cName}}</td>
                <td colspan="2">{{label.table.cVote}}</td>
                <td>{{label.table.cTB}}</td>
                <td>{{label.table.cNV}}</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key,value) in candidates[0]">
                <td>{{value.no}} {{label.table.period}} {{value.name}}</td>
                <td>{{value.votes}}</td>
                <td><canvas id="c4" width="500" height = "200" style="border:solid 1px #000000;"></canvas></td>
                

              
                 
            </tr>
        </tbody>
</table>
</div>

＆＃13;

画布输出是10个标签框。

现在，我想将画布输出显示到每行的标签框列。但它不起作用。我做错了什么。任何答案都将非常感激。谢谢

Answer 1

您需要为每个画布分配一个唯一ID。从技术上讲，拥有＆gt;是不合法的。 1个具有相同ID的项目。使用ng-repeat值中的某些内容构造ID。也许value.no如果这是一个唯一的数字。您需要修改您的javascript以获取适当的上下文并写入它们。可能在页面末尾或页面加载时执行此操作。

或者更好的方法是制作一个包含画布的指令和绘制它的必要函数。该指令将负责根据传入的值创建唯一ID，然后它将知道如何引用和绘制到上下文中。

将html画布放在表格单元格中

1 个答案: