[编辑]包括您的细读方法的完整代码。
function drawHPicto(form) {
var rowNum = form.Row.value;
var colNum = form.Column.value;
//The data that is to be represented on the chart
var data = [];
var label = [];
var chartTitle = form.subtitle.value;
if (colNum == 2) {
if (rowNum == 2) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
}
else if (rowNum == 3) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
}
else if (rowNum == 4) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
}
else if (rowNum == 5) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
data.push([parseFloat(form.r5c1.value),parseFloat(form.r5c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
}
else if (rowNum == 6) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
data.push([parseFloat(form.r5c1.value),parseFloat(form.r5c2.value)]);
data.push([parseFloat(form.r6c1.value),parseFloat(form.r6c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
label.push(form.title6.value);
}
}
else {
if (rowNum == 2) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
}
else if (rowNum == 3) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
}
else if (rowNum == 4) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
data.push(parseFloat(form.r4c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
}
else if (rowNum == 5) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
data.push(parseFloat(form.r4c1.value));
data.push(parseFloat(form.r5c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
}
else if (rowNum == 6) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
data.push(parseFloat(form.r4c1.value));
data.push(parseFloat(form.r5c1.value));
data.push(parseFloat(form.r6c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
label.push(form.title6.value);
}
}
var checkNum = $('input[name=showNumberPicto]:checked').val();
var checkLabel = $('input[name=showLabelPicto]:checked').val();
// clear graph
RGraph.Clear(document.getElementById('cvs'));
RGraph.ObjectRegistry.Clear(document.getElementById('cvs'));
var maxValue = Math.max.apply(Math, data);
var minValue = Math.min.apply(Math, data);
var maxLimit = Math.floor(maxValue/4);
var minLimit = Math.floor(minValue/4);
// set var for javascript to validate
setCurrentMin = minLimit;
setCurrentMax = maxLimit;
form.intDiv.min = minLimit;
form.intDiv.max = maxLimit;
if(form.intDiv.value == 1){
form.intDiv.value = Math.floor((maxLimit+minLimit)/2);
if (form.intDiv.value == 0){form.intDiv.value=1;};
var divider = form.intDiv.value;
}else{
// check input for validation within limit
if (form.intDiv.value>setCurrentMax) {
form.intDiv.value = setCurrentMax;
}else if (form.intDiv.value < setCurrentMin) {
form.intDiv.value = setCurrentMin;
}
if ((maxValue/form.intDiv.value) > 7){
form.intDiv.value = setCurrentMax;
}
var divider = form.intDiv.value;
//alert(divider);
}
//alert (maxValue);
//var drawCanvas = document.getElementById('cvs');
//var context = drawCanvas.getContext('2d');
var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
var img = new Image();
img.src="assets/orange.png";
img.onload = function(){
for (var i=0;i<data.length;i++)
{
var drawRepeat = Math.floor((data[i]/divider));
alert(data.length);
var reminder = Math.round(((data[i]%divider)/divider)*10);
var getDecimal = (10-reminder)/10;
var posY = ((i*30)+10);
var posX = ((drawRepeat*30)+30);
//ctx.save();
ctx.drawImage(img,posX,posY);
ctx.fillStyle= "#FFF";
ctx.fillRect(posX,posY,30,getDecimal*30);
for (var j=0;j<drawRepeat;j++){
var yPos = ((i*30)+10);
var xPos = ((j*30)+30);
ctx.drawImage(img,xPos,yPos);
}
if (checkLabel == "1") {
ctx.fillStyle= "#000";
ctx.fillText(label[i],15,((i*30)+15))
}else{
ctx.fillText("")
}
if (checkNum == "1") {
ctx.fillStyle= "#000";
ctx.fillText(data[i],260,((i*30)+15))
}else{
ctx.fillText("")
}
}
}
}
因此问题在于img.onload发生时的for循环。
img.onload = function(){
for (var i=0;i<data.length;i++)
{
var drawRepeat = Math.floor((data[i]/divider));
alert(data.length);
var reminder = Math.round(((data[i]%divider)/divider)*10);
var getDecimal = (10-reminder)/10;
var posY = ((i*30)+10);
var posX = ((drawRepeat*30)+30);
//ctx.save();
ctx.drawImage(img,posX,posY);
ctx.fillStyle= "#FFF";
ctx.fillRect(posX,posY,30,getDecimal*30);
for (var j=0;j<drawRepeat;j++){
var yPos = ((i*30)+10);
var xPos = ((j*30)+30);
ctx.drawImage(img,xPos,yPos);
}
if (checkLabel == "1") {
ctx.fillStyle= "#000";
ctx.fillText(label[i],15,((i*30)+15))
}else{
ctx.fillText("")
}
if (checkNum == "1") {
ctx.fillStyle= "#000";
ctx.fillText(data[i],260,((i*30)+15))
}else{
ctx.fillText("")
}
}
}
我使用这个相同的循环以垂直图形方式绘制图像，它工作正常。当我用这个for循环来绘制水平图时，for循环在i = 0时结束。我找出data.length返回值3，因此for循环应该运行3个循环，但它在第一个循环停止。有人有解决方案吗？我疯了。
答案 0 :(得分：0)
在您的代码中，您有：
> if (colNum == 2) {
> if (rowNum == 2) {
> data.push([parseFloat(form.r1c1.value),parseFloatform.r1c2.value)]);
> data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
> ---------------------------------------------------------^
可能名称为r2d2的表单控件不存在，导致错误的结果。
答案 1 :(得分：0)
if (checkLabel == "1") {
ctx.fillStyle= "#000";
ctx.fillText(label[i],15,((i*30)+15))
}else{
ctx.fillText("",15,((i*30)+15))
}
管理以查找问题所在，之前在else语句中我设置了ctx.fillText（“”）;没有x和y坐标，显然停止了循环。