1
나는 html 캔버스가 있습니다. 각각의 내부에는 집계 상자가 있으며 집계 상자의 수는 모든 후보자의 투표 수에 따라 생성됩니다. 집계표가 집계표 아래에 50 일 때 캔버스 안에 완전히 표시되지만 투표 수가 100을 초과하면 다른 집계표가 누락됩니다. 그들은 모두 수평으로 표시됩니다. 지금 원하는 것은 캔버스 안에 모든 집계 상자를 표시하는 것입니다. max-width : "100 %"로 CSS를 추가했는데 문제가 해결 될 것이라고 생각했지만 해결할 수는 없습니다. 그것에 대해 무엇을해야합니까? 어떤 제안이라도 대단히 감사 할 것입니다. 미리 감사드립니다.html 캔버스의 내용은 반응 적이어야합니다.
이것은 아래 코드입니다. 쇼 젬에게 감사드립니다.
var tb = angular.module("tb", []);
tb.controller("tallyboxController", function($scope) {
'use strict';
$scope.label = {
table: {
cName: "Candidate's Name",
cVote: 'Vote',
cTB: 'Tally Boxes',
cNV: 'No of votes',
period: '.'
},
};
$scope.presidents = [{
no: '1',
name: 'Jeoanna Lingh',
votes: 1223,
},{
no: '2',
name: 'Jewel Miller',
votes: 1234,
},{
no: '3',
name: 'Shin Lee',
votes: 1001,
}];
$scope.candidates = [
$scope.presidents,
$scope.vicepresidents
];
});
var tb = angular.module('tb');
tb.directive('drawing', function() {
return {
restrict: 'A',
scope: {
candidate: '='
},
link: function(scope, element, attrs) {
var colors = ['Red', 'Green', 'Blue', 'Yellow','black'];
scope.$watch("candidate.votes", function(newValue, oldValue) {
console.log('rendering', newValue);
render();
});
function render() {
var votes = scope.candidate.votes;
var ctx = element[0].getContext('2d');
var remainder = 0;
var oneBox = 0;
// clear canvas (needed for subtracting votes)
// and is a good practice anyway
element[0].width = element[0].width;
if (votes > 4) {
if (remainder = votes % 5) {
oneBox = (votes - remainder)/5;
}
else {
oneBox = votes/5;
}
} else {
remainder = votes;
}
drawOneBox();
function drawOneBox() {
;
for (var i = 0; i < oneBox; i++) {
var color = colors[Math.floor(i/5)];
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(25 + i * 25, 25);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
// recheck the color
color = colors[Math.floor(oneBox/5)];
if (remainder == 1) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 2) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 3) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
if (remainder == 4) {
ctx.beginPath();
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(25 + i * 25, 5);
ctx.moveTo(5 + i * 25, 5);
ctx.lineTo(5 + i * 25, 25);
ctx.moveTo(25 + i * 25, 5);
ctx.lineTo(25 + i * 25, 25);
ctx.moveTo(25 + i * 25, 25);
ctx.lineTo(5 + i * 25, 25);
ctx.strokeStyle = color;
ctx.stroke();
}
};
}
render();
} // end
};
});canvas {
max-width: 100%;
height: auto;
border: 2px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="tb">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="tallyboxController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>{{label.table.cName}}</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>
<canvas width="1000" height="30" id="{{value.no}}" candidate="value" drawing></canvas>
</td>
<td>{{value.votes}}</td>
</tr>
</tbody
</table>
</div>
</body>
</html>
당신이 클래스와'canvas' 설정됩니다. – dippas
뭐라구 디파스가 무슨 뜻이야? 분명히 해줘. :-) – QWERTY
은 CSS에'.canvas'가 있지만'canvas'는 HTML 태그가 아니기 때문에 클래스가 아니라'canvas'가 있어야합니다. – dippas