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

Ссылки