Поместите HTML-холст в ячейки таблицы

Question

У меня есть стол. Я пытаюсь отобразить в столбце подсчитываемых полей html-холст, который я создал. У меня есть 10 записей, поэтому холст должен отображаться 10 раз внутри таблицы. Это то, что я сделал до сих пор:

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();
}
}

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>

Выход холста - 10 счетных коробок.

Теперь я хочу отобразить вывод холста в столбец подсчета в каждой строке. Но это не работает. Какую ошибку я совершил. Любой ответ будет высоко ценится. Спасибо

Answer 1

Вам нужно будет дать каждому холсту уникальный идентификатор, с одной стороны. Технически не разрешено иметь> 1 предмет с таким же идентификатором. Создайте идентификатор, используя что-то в значении вашего ng-repeat. Может быть, value.no, если это уникальный номер. Вам нужно будет изменить ваш JavaScript, чтобы получить соответствующие контексты и записать их. Вероятно, сделать это в конце страницы или на странице загрузки.

Или, возможно, лучше сделать директиву, содержащую ваш холст и необходимую функцию для его рисования. Директива будет отвечать за создание уникального идентификатора на основе переданных значений, а затем она будет знать, как ссылаться и вставлять в контекст.