protovis (protovis)

Перейти к навигации Перейти к поиску

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>

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

// 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 предложения.