protovis

Материал из Википедии — свободной энциклопедии
Перейти к: навигация, поиск
Protovis
Тип

JavaScript-библиотека

Разработчик

Майк Босток, Джефф Хиир

Написана на

JavaScript

Операционная система

Кроссплатформенное ПО

Последняя версия

3.2 (28 мая 2010)

Лицензия

BSD

Сайт

protovis.org

Protovis — JavaScript библиотека для визуализации цифровых данных в виде графиков и диаграмм. Внешний вид графика кодируется скриптом с синтаксисом, напоминающим Prototype и jQuery. Авторы проекта Майк Босток и Джефф Хиир являются сотрудниками Stanford Visualization Group. В основе Protovis использует Canvas element для рендеринга, позволяя прозрачно внедрять визуальные элементы веб-страницы.

Использование[править | править вики-текст]

Protovis — один JavaScript файл, содержащий все свои декларации и функции. Она может быть включена в веб-страницу с помощью следующего кода:

<script type="text/javascript" src="protovis-r3.1.js"></script>

Для отображения графика в тело страницы нужно добавить код следующим образом

<script type="text/javascript+protovis">
  // Protovis code goes here...
</script>

Примеры[править | править вики-текст]

Вот пример кода, необходимого для построения простого столбчатого графика:

A simple bar chart in Protovis
// Create the root panel and set the visualization's size to 150x150
var vis = new pv.Panel()
    .width(150)
    .height(150);
 
// Add the horizontal rules (grid lines), we add them first so they go in the back.
vis.add(pv.Rule)
    .data(pv.range(0, 2, .5))
    .bottom(function(d) d * 80 + 1)
  .add(pv.Label);
 
// Add the bars with the height corresponding to the values in the data property
vis.add(pv.Bar)
    .data([1, 1.2, 1.7, 1.5, .7])
    .width(20)
    .height(function(d) 80 * d)
    .bottom(0)
    .left(function() this.index * 25 + 25) // this.index is the position of the datum in the array
  .anchor("bottom").add(pv.Label); // Add a label to the bottom of each bar
 
// Render everything.
vis.render();

В Protovis широко используются цепочки методов, что позволяет написать пример всего в 4 предложения.

Ссылки[править | править вики-текст]