JavaScriptを使用してx/y位置に点を描画する方法

2次元の方法で点をプロットしたいと思います（それぞれx座標とy座標を持ちます）。あなたがこれを行うライブラリやプロジェクトを知っていれば、最初からビルドする必要はありません。JavaScriptを使用してx/y位置に点を描画する方法

出典

2009-10-02 Tam

は、あなたも軸は必要ですか？ポイントのコンテキストを与えるには？ –

はい...実際には、軸に加えて4つの象限に分割した正方形のように表示する必要があります – Tam

あなたは '

ここでは1を持っている： http://jsdraw2d.jsfiction.com/

出典

2009-10-02 16:20:19

Raphaël - ウェブ上のベクトルグラフィックスを使用して作業を簡素化する必要があり、小さなJavaScriptライブラリ。

出典

2009-10-02 16:21:18

これを行うには、キャンバスタグを使用するのが最適です。

// Create a canvas that extends the entire screen 
 
// and it will draw right over the other html elements, like buttons, etc 
 
var canvas = document.createElement("canvas"); 
 
canvas.setAttribute("width", window.innerWidth); 
 
canvas.setAttribute("height", window.innerHeight); 
 
canvas.setAttribute("style", "position: absolute; x:0; y:0;"); 
 
document.body.appendChild(canvas); 
 

 
//Then you can draw a point at (10,10) like this: 
 

 
var ctx = canvas.getContext("2d"); 
 
ctx.fillRect(10,10,1,1);

さらに、あなたはImageDataをを使用して、画面上のすべてのピクセルを操作することができます：ここではキャンバスを作成する例があります。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

出典

2009-10-04 04:38:33 jhuni

矩形は少し大きければ見つけるのが簡単です。 'ctx.fillRect（10,10,10,10）; ' – kkron

すでにjQueryのを使用してきた場合は、Flotは、グラフを描画するための非常に非常に単純な（しかし強力な）方法です。

またGoogle Charts APIで見ることができる - クロスブラウザ保証：

出典

2009-10-04 04:55:43 nickf