ライブラリを持たないHTML、CSS、JavaScriptでjsonデータを使用してグラフを描画する方法

Question

jsonデータを使用して線グラフをプロットする必要があります。 HTML、CSS、JavaScriptのみを使用することができます。ライブラリとAPIは許可されていません。誰でもこの問題を解決するのを助けてくれますか？前もって感謝します。

JSONデータ：

var marks: [ 
    { 
     "name": AAA, 
     "age":20, 
     "exam": { 
     "no_of_exams": 5, 
     "average": "400" 
     } 
    }, 
    { 
     "name": BBB, 
     "age":25, 
     "exam": { 
     "no_of_exams": 10, 
     "average": "800" 
     } 
    },{ 
     "name": ccc, 
     "age":30, 
     "exam": { 
     "no_of_exams": 8, 
     "average": "700" 
     } 
    } 
]; 

は、今私はno_of_examsと平均のためにプロットする必要があります。

Answer 1

まず、グラフィックを描画するhtml <canvas>要素を作成する必要があります。次に、document.getElementByIdまたはdocument.querySelectorを使って、id、classなどで要素を取得できます。あなたが所望の高さと色で塗りつぶされた矩形を作ることができますJSONファイルからデータを渡す

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(10,0,20,75); // fillRect(x,y,width,height) 

：その後、プログラムによってこのような単純な図形を描くことができます。すべてが残っています - すべてのデータをループして微調整します。この

var colors = ['red','green','blue','purple'] 
for (let i=0; i<marks.length; i++) { 
    ctx.fillStyle = colors[i] 
    ctx.fillRect(marks[i].exam.no_of_exams,marks[i].exam.average,20,75); 
} 

ような何かあなたが取得するW3Schools docsを参照することができMOR

Answer 2

に上記のこれを行うための最初の方法ですが、1つ以上の方法があるとコメントキャンバスを使用してに関する情報：

はdiv要素を作成します。要素をJSONデータに合わせてサイズを変更して色付けすると、CSSを正しく使用すると棒グラフが表示されます。私はこれがチャートを作る基本的な方法だと思う。しかし、JSコードのパフォーマンスには注意が必要です。