動的配列値からCanvas Barchartを作成する

Question

動的に作成された要素の配列から棒グラフを作成しようとしています。

現在の配列リスト、chrr1 = [xxx、xxx、xxx、xxx、xxx、xxx、xxxx]。また、alert（）を使って、canvas.heightが200に設定され、hが関数のようにループされ、10で除算されていることを確認しました。

ただし、棒グラフは作成されていません。私は身長を上げようとしたが、うまくいかなかった。それだけでキャンバスの右側に1つのバーを示します（私はここに画像をアップロードすることができませんでした。アップローダーが動作していないようです。）

var canvas = document.getElementById("ttmrev"); 
    var c = canvas.getContext("2d"); 
    c.fillStyle = "#000000"; 
    var currX = 0; 
    var width = 30; 
    for(j = 0; j < chrr1.length; j++) { 
    var max_value = Math.max.apply(null, chrr1); 
    var max_val_str = max_value.toString(); 
    if (max_val_str.length < 5) { 
     canvas.height = "200"; 
    } else { 
     canvas.height = "1000"; 
    } 
    var h = chrr1[j]; 
    var g = h.toString(); 
    if (g.length < 5) { 
     h = h/10; 
    } else if (g.length >= 5) { 
     h = h/100; 
    } else if (!g || g.length === 0) { 
     h = 0; 
    } 
    c.rect(currX, canvas.height - h, width, h); 
    c.fill(); 
    currX += 40; 
    } 

すべてのヘルプははるかに高く評価されます。

Answer 1

問題は、forループ内でキャンバスのサイズを変更することです。これは、キャンバスを歪ませ、以前のすべての描画を消してしまいます。

はあなたではなく...そうのように、forループの外に

var canvas = document.getElementById("ttmrev"); 
 
var c = canvas.getContext("2d"); 
 
var currX = 0; 
 
var width = 40; 
 
chrr1 = [333, 222, 666, 1200, 444, 1000]; 
 

 
var max_value = Math.max.apply(null, chrr1); 
 
var max_val_str = max_value.toString(); 
 
if (max_val_str.length < 5) { 
 
    canvas.height = 200; 
 
} else { 
 
    canvas.height = 1000; 
 
} 
 

 
for (j = 0; j < chrr1.length; j++) { 
 
    var h = chrr1[j]; 
 
    var g = h.toString(); 
 
    if (g.length < 5) { 
 
     h = h/10; 
 
    } else if (g.length >= 5) { 
 
     h = h/100; 
 
    } else if (!g || g.length === 0) { 
 
     h = 0; 
 
    } 
 
    c.rect(currX, canvas.height - h, width, h); 
 
    c.fillStyle = "#000000"; 
 
    c.fill(); 
 
    currX += 52; 
 
}

body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #e4e6e8}

<canvas id="ttmrev"></canvas>