protovis
Protovis — JavaScript библиотека для визуализации цифровых данных в виде графиков и диаграмм. Внешний вид графика кодируется скриптом с синтаксисом, напоминающим Prototype и jQuery. Авторы проекта Майк Босток и Джефф Хиир являются сотрудниками Stanford Visualization Group. В основе Protovis использует Canvas element для рендеринга, позволяя прозрачно внедрять визуальные элементы веб-страницы.
| Protovis | |
|---|---|
 | |
| Тип | JavaScript-библиотека |
| Разработчики | Майк Босток, Джефф Хиир |
| Написана на | JavaScript |
| Операционная система | Кроссплатформенное ПО |
| Последняя версия | 3.2 (28 мая 2010) |
| Лицензия | BSD |
| Сайт | protovis.org |
Использование править
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 предложения.