Предложение Джеймса Блэка использовать тег canvas - очень хороший вариант, но для него требуется не обновленный браузер IE. Или это? Благодаря Google, вы сможете использовать Chrome Renderer в IE . Таким образом, вы настроите динамические графики на браузеры с поддержкой HTML5 (Gecko, Webkit и Presto) и попросите пользователей IE установить Google Add, как только он выйдет. canvas работает в разных браузерах благодаря встроенной поддержке всего, что не связано с IE, а также к Explore Canvas для IE. SVG поддержка также доступна для всех браузеров спасибо до некоторые плагины для IE . Обратите внимание, что если вам требуется Chrome Renderer для IE, вам больше ничего не нужно.
Вы можете либо использовать canvas или svg для построения графиков , а уже есть несколько библиотек для этого . Обе технологии позволяют создавать динамические графики , но у них есть несколько разных подходов.
<b>SVG</b> <b>canvas</b>
-------------------------------------------------------------------------------
Has scene DOM (SVG DOM, though) Single HTML element,
rendering script-driven
Deals in shapes Deals in pixels
Somewhat hard to mix with HTML (not XHTML) Behaves like an image in both
Event handling easy Event handling hard
Я бы подумал, что я бы пошел с SVG, чтобы сделать то, что вы хотите, так как добавить к нему динамические метки будет очень просто, но будет трудно создать действительно гибкий API для псевдо 3D рассеяния участки.
Проблема с svg заключается в том, что, пытаясь создать очень гибкий язык, вы получаете очень сложный. Здесь вы можете увидеть код, написанный в обеих библиотеках, которые делают одно и то же.
SVG
var rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", "5");
rect.setAttribute("y", "5");
rect.setAttribute("width", "20");
rect.setAttribute("height", "20");
rect.setAttribute("fill", "red");
parent.appendChild(rect);
var poly = document.createElementNS(SVG_NS, "polygon");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "-40,40 0,-40, 40,40");
parent.appendChild(poly);
Canvas
with (ctx) {
fillStyle = "red";
fillRect(5, 5, 20, 20);
}
with (ctx) {
fillStyle = "green";
beginPath();
moveTo(-40, 40);
moveTo(0, -40);
moveTo(40, 40);
closePath();
fill();
}